/* soft.ghost — design tokens & base (v2b)
 * Mixed direction A + C: matte monochrome, quiet glass, one muted accent per ghost.
 * Two rooms: day (Cloud Dancer) and night (espresso graphite). Never pure black.
 */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff") format("woff"); font-weight: 100 900; font-display: swap; }

:root, [data-theme="night"] {
  --bg: #151312;            /* espresso graphite — warm, never black */
  --bg-2: #1C1917;
  --bg-3: #24201D;
  --fg: #F0EEE9;            /* Pantone 11-4201 Cloud Dancer */
  --fg-2: #C9C4BC;
  --mute: #8C857C;
  --mute-2: #5E5852;
  --hair: rgba(240, 238, 233, .09);
  --hair-2: rgba(240, 238, 233, .16);
  --glass: rgba(240, 238, 233, .045);
  --glass-2: rgba(240, 238, 233, .08);
  --beam: rgba(240, 238, 233, .07);   /* the moonlight */
  --accent: #D4A86A;                   /* set live to the current ghost's relic color */
  --accent-text: color-mix(in oklab, var(--accent) 72%, var(--fg));   /* accent as text: always ≥ 4.5:1 */
  color-scheme: dark;
}
[data-theme="day"] {
  --bg: #ECE9E3;
  --bg-2: #E4E0D9;
  --bg-3: #DAD5CD;
  --fg: #1C1A19;
  --fg-2: #3D3935;
  --mute: #665F57;                     /* 5.1:1 on day, 4.7:1 on bg-2 */
  --mute-2: #A39C93;
  --hair: rgba(28, 26, 25, .09);
  --hair-2: rgba(28, 26, 25, .16);
  --glass: rgba(255, 255, 255, .42);
  --glass-2: rgba(255, 255, 255, .62);
  --beam: rgba(255, 255, 255, .55);
  --accent-text: color-mix(in oklab, var(--accent) 40%, var(--fg));
  color-scheme: light;
}

:root {
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.45, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r-s: 12px; --r-m: 18px; --r-l: 28px;
}

/* display: thin grotesk, tight — modern, quiet */
.sg-display { font-family: var(--sans); font-weight: 250; letter-spacing: -0.045em; line-height: .96; }
/* voice: upright soft serif — the ghosts speak in it */
.sg-voice { font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 32, "SOFT" 100, "WONK" 0; letter-spacing: -0.008em; line-height: 1.32; }
/* labels: the readout of a quiet instrument */
.sg-label { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; }

/* glass */
.sg-glass { background: var(--glass); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }

/* the moonlight: one soft beam, slowly breathing. no colored fog. */
.sg-beam { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 34% at 50% 30%, var(--beam), transparent 70%),
    radial-gradient(60% 45% at 50% 105%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%);
  animation: sg-beam 14s var(--ease) infinite; }
@keyframes sg-beam { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* film grain: barely there, moves at 8fps */
.sg-grain { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .045; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sg-grain 1s steps(8) infinite; }
@keyframes sg-grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-1%,-2%); } 100% { transform: translate(3%,1%); } }

.sg-ghost { overflow: visible; display: block; width: 100%; height: auto; }
.alive .sg-ghost .sg-body { animation: sg-hover 7s var(--ease) infinite; }
.alive .sg-ghost .sg-relic { animation: sg-bob 6s var(--ease) infinite; }
.alive .sg-ghost .sg-shadow { animation: sg-shadow 7s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sg-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes sg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes sg-shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .86; opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- v3 · tints: a code recolors the whole room, in both lights ---------- */
[data-tint][data-theme="night"] {
  --bg: color-mix(in oklab, var(--tint) 20%, #151312);
  --bg-2: color-mix(in oklab, var(--tint) 23%, #1C1917);
  --bg-3: color-mix(in oklab, var(--tint) 25%, #24201D);
  --fg-2: color-mix(in oklab, var(--tint) 12%, #C9C4BC);
  --mute: color-mix(in oklab, var(--tint) 16%, #A8A198);
  --mute-2: color-mix(in oklab, var(--tint) 28%, #5E5852);
  --hair: color-mix(in oklab, var(--tint) 35%, rgba(240, 238, 233, .10));
  --hair-2: color-mix(in oklab, var(--tint) 35%, rgba(240, 238, 233, .17));
  --beam: color-mix(in oklab, var(--tint) 45%, rgba(240, 238, 233, .08));
}
[data-tint][data-theme="day"] {
  --bg: color-mix(in oklab, var(--tint) 17%, #ECE9E3);
  --bg-2: color-mix(in oklab, var(--tint) 20%, #E4E0D9);
  --bg-3: color-mix(in oklab, var(--tint) 23%, #DAD5CD);
  --fg-2: color-mix(in oklab, var(--tint) 16%, #3D3935);
  --mute: color-mix(in oklab, var(--tint) 16%, #4F4842);
  --mute-2: color-mix(in oklab, var(--tint) 26%, #A39C93);
  --hair: color-mix(in oklab, var(--tint) 30%, rgba(28, 26, 25, .10));
  --hair-2: color-mix(in oklab, var(--tint) 30%, rgba(28, 26, 25, .17));
  --beam: color-mix(in oklab, var(--tint) 25%, rgba(255, 255, 255, .55));
}