/* =============================================================================
 * SOOM — design tokens
 * AMBIENT FUTURISM · Quiet technology for recovery
 * -----------------------------------------------------------------------------
 * The page is not a document. It is an environment holding a state.
 *
 * So there are no "sections with backgrounds" here. There is one dark field —
 * carbon, graphite, slate — and a small set of living accents that appear only
 * where something is active. Depth comes from luminance and blur, not from
 * borders or cards. Colour arrives as light, not as fill.
 *
 * Every state below is a set of numbers the WebGL field also reads (js/env.js),
 * so the environment and the interface are never describing different rooms.
 * ========================================================================== */

/* Registered so a state change can be interpolated rather than switched. */
@property --ink      { syntax: "<color>"; inherits: true; initial-value: #e6e8e6; }
@property --ink-2    { syntax: "<color>"; inherits: true; initial-value: #aeb6bf; }
@property --ink-3    { syntax: "<color>"; inherits: true; initial-value: #99a3ae; }
@property --accent   { syntax: "<color>"; inherits: true; initial-value: #e2603a; }
@property --line     { syntax: "<color>"; inherits: true; initial-value: rgba(230, 232, 230, 0.14); }
@property --line-2   { syntax: "<color>"; inherits: true; initial-value: rgba(230, 232, 230, 0.07); }
@property --veil     { syntax: "<color>"; inherits: true; initial-value: rgba(10, 13, 17, 0.72); }

:root {
  /* ---- Foundation ------------------------------------------------------
     Never pure black: pure black kills the sense of air and smears on OLED. */
  --carbon:    #0a0d11;   /* Carbon Night   — the room with the light off */
  --graphite:  #12161c;   /* Deep Graphite  — absorbs light               */
  --slate:     #1a212a;   /* Liquid Slate   — the faintest blue in it     */
  --slate-2:   #232b35;
  --fog:       #7e8896;   /* Fog Silver     — translucent grey            */
  --mineral:   #e6e8e6;   /* Mineral White  — mineral, not clinical       */
  --mineral-2: #b9bec2;

  /* ---- Living accents ---------------------------------------------------
     Used at the size of a signal, never as a fill. */
  --breath: #6f93a8;   /* between mist and water           */
  --ember:  #e2603a;   /* the Quiet Street sachet, modernised */
  --amber:  #c98f4e;   /* tea, and low lamplight           */
  --moss:   #7f8f73;   /* body and space                   */

  /* ---- Type -------------------------------------------------------------
     Three families with three jobs, and no overlap between them.

       --font      Pretendard. Everything a person reads: Korean, Latin body,
                   navigation, product copy. Its Hangul is drawn for screen —
                   open counters, tall x-height, even colour — so 400 at 16px
                   holds on a dark field where a lighter weight would silver
                   out and read as unfinished rather than as calm.

       --font-en   Instrument Sans. English display lines only, and only the
                   ones meant to be read as voice rather than as label. It has
                   a hand in it: single-storey g, angled y, flared R. That is
                   what keeps 'Recovery has many languages.' from sounding like
                   a product tagline.

       --font-mono Plex Mono. Only what the system says about itself — state,
                   scene number, clock time, temperature, steep time, volume,
                   product number. If a human wrote the words, they are not set
                   in this. Monospace applied to brand copy is the single
                   fastest way to make a sensory brand read as a dashboard.

     Weight carries trust here. The earlier system leaned on 200/300, which is
     where 'futuristic' and 'fragile' become the same thing — on a dark ground,
     at mobile DPR, hairline Hangul stems break up and the brand reads as a
     concept mock. 400 is now the floor everywhere, 500 does the emphasis, and
     nothing below 400 is ever set as body. */
  --font: "Pretendard Variable", "Pretendard Fallback", system-ui,
    -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-en: "Instrument Sans", "Instrument Fallback", "Pretendard Variable",
    system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    monospace;

  --wt-regular: 400;
  --wt-book: 450;    /* Latin display + numerals; invisible in Hangul, so it
                        is only ever applied to Latin and figures. */
  --wt-medium: 500;
  --wt-semi: 600;    /* the wordmark alone */

  /* Display sizes are wide-ranging; the smallest label and the largest
     statement are the two ends of the same instrument. The floors went up:
     nothing on this page is now below 13px, and body is never below 16px. */
  --t-hero:    clamp(2.5rem, 1rem + 6.8vw, 6.75rem);
  --t-d1:      clamp(1.875rem, 1rem + 4.2vw, 4rem);
  --t-d2:      clamp(1.45rem, 1rem + 2.2vw, 2.5rem);
  --t-d3:      clamp(1.125rem, 0.95rem + 1vw, 1.5rem);
  --t-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-body:    clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);   /* 16 → 17 */
  --t-small:   clamp(0.875rem, 0.86rem + 0.1vw, 0.9375rem); /* 14 → 15 */
  --t-mono:    clamp(0.8125rem, 0.8rem + 0.06vw, 0.84375rem); /* 13 → 13.5 */

  /* Korean needs more leading than Latin at the same size: the syllable block
     is square and dense, so 1.5 that reads open in English reads packed in
     Hangul. Body sits at 1.75, and short headings close to 1.2. */
  --lh-hero: 1.06;
  --lh-display: 1.18;
  --lh-title: 1.32;
  --lh-body: 1.75;
  --lh-tight: 1.5;

  /* Tracking. Hangul is never tracked — the syllable block already carries its
     own sidebearings, and adding letter-spacing to Korean is the most common
     way a Western-trained system makes Korean look wrong. Latin gets tracking
     only where it is acting as a label. */
  --track-hero: -0.028em;  /* large Latin closes up  */
  --track-display: -0.018em;
  --track-ko: 0em;         /* Korean: never anything else */
  --track-label: 0.045em;  /* small Latin caps, nav, buttons */
  --track-mark: 0.34em;    /* the wordmark, and only the wordmark */
  --track-mono: 0.055em;   /* was 0.16em — mono is already wide */

  /* A comfortable line is 38–48 characters in Korean; past that the eye loses
     the return sweep on a dark ground. */
  --measure: 42ch;
  --measure-wide: 48ch;
  --measure-narrow: 36ch;

  /* ---- Space ------------------------------------------------------------ */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;
  --s10: 9rem;
  --s-block: clamp(4.5rem, 2rem + 7vw, 9rem);

  /* ---- Layout ----------------------------------------------------------- */
  --maxw: 1360px;
  --gutter: clamp(1.25rem, 0.5rem + 2.8vw, 3.25rem);
  --nav-h: 60px;

  /* ---- Depth ------------------------------------------------------------
     Layers are described by how far into the field they sit, not by shadow. */
  --z-near: 0px;
  --z-mid: 14px;
  --z-far: 34px;
  --blur-near: 0px;
  --blur-mid: 3px;
  --blur-far: 10px;

  /* ---- Motion -----------------------------------------------------------
     `--ease` is expo-out: instant acknowledgement, long settle. Interaction is
     answered immediately; the picture takes its time coming to rest. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
  --t-state: 900ms;   /* one environmental state becoming another */
  --t-ui: 240ms;      /* acknowledgement of a press or a hover    */
  --t-focus: 1100ms;  /* type coming into focus in the field      */

  /* ---- The default state ------------------------------------------------ */
  --ink: var(--mineral);
  --ink-2: #aeb6bf;
  --ink-3: #99a3ae;
  --accent: var(--ember);
  --line: rgba(230, 232, 230, 0.14);
  --line-2: rgba(230, 232, 230, 0.07);
  --veil: rgba(10, 13, 17, 0.72);

  color-scheme: dark;
}

/* =============================================================================
 * Environmental states
 * -----------------------------------------------------------------------------
 * Not "sections with themes" — states the whole environment enters. Each one
 * names an accent and the four numbers the field is rendered from:
 *
 *   --f-tint    the colour light takes in this state
 *   --f-density how much matter is suspended in the air   (0 – 1)
 *   --f-flow    how quickly it moves                       (0 – 1)
 *   --f-scatter how far light spreads through it           (0 – 1)
 *
 * js/env.js reads these off :root, so changing a state here changes both the
 * interface and the environment at once. There is no second source of truth.
 * ========================================================================== */

:root,
[data-state="rest"] {
  --accent: var(--breath);
  --f-tint: #4a6a80;
  --f-density: 0.30;
  --f-flow: 0.30;
  --f-scatter: 0.55;
}

/* Taste — warm amber, liquid spreading in slow circular waves. */
[data-state="taste"] {
  --accent: var(--amber);
  --f-tint: #8a5c2e;
  --f-density: 0.40;
  --f-flow: 0.42;
  --f-scatter: 0.72;
}

/* Scent — translucent fog, particles with no direction, focus drifting. */
[data-state="scent"] {
  --accent: #b98a6a;
  --f-tint: #6d6a72;
  --f-density: 0.44;
  --f-flow: 0.20;
  --f-scatter: 0.70;
}

/* Sound — no waveform drawn anywhere. The whole volume vibrates, low. */
[data-state="sound"] {
  --accent: var(--breath);
  --f-tint: #3f5f76;
  --f-density: 0.26;
  --f-flow: 0.66;
  --f-scatter: 0.40;
}

/* Space — the field thins and opens; there is somewhere to move. */
[data-state="space"] {
  --accent: #8fa3ad;
  --f-tint: #46545e;
  --f-density: 0.14;
  --f-flow: 0.16;
  --f-scatter: 0.30;
}

/* Body — surface tension releases; the interface slackens. */
[data-state="body"] {
  --accent: var(--moss);
  --f-tint: #4d5a48;
  --f-density: 0.34;
  --f-flow: 0.26;
  --f-scatter: 0.62;
}

/* Quiet Street — 19:42, dusk, wet asphalt, one warm window far off. */
[data-state="quiet-street"] {
  --accent: var(--ember);
  --f-tint: #2f4152;
  --f-density: 0.40;
  --f-flow: 0.24;
  --f-scatter: 0.50;
}

/* The tea chapter: lamplight close in, the room around it dark. */
[data-state="ember"] {
  --accent: var(--amber);
  --f-tint: #6b4529;
  --f-density: 0.32;
  --f-flow: 0.22;
  --f-scatter: 0.66;
}

/* The still point. Almost nothing suspended, almost no movement. */
[data-state="still"] {
  --accent: var(--amber);
  --f-tint: #2b3440;
  --f-density: 0.18;
  --f-flow: 0.10;
  --f-scatter: 0.34;
}

/* ---- Potential scenes -------------------------------------------------
   The four collections that have no product yet still have a temperature.
   They are shown as latent states, never as disabled rows. */
[data-scene-tint="quiet-street"]  { --tint-a: #2f4152; --tint-b: #e2603a; }
[data-scene-tint="warm-meeting"]  { --tint-a: #5a4030; --tint-b: #c98f4e; }
[data-scene-tint="lucky-child"]   { --tint-a: #4a4a34; --tint-b: #d9c26a; }
[data-scene-tint="peace-healing"] { --tint-a: #3b4a4a; --tint-b: #9fb6ae; }
[data-scene-tint="little-coast"]  { --tint-a: #3d4a55; --tint-b: #b9c3c8; }