/* ============================================================
   Taivaallista Designia Oy — design tokens
   ------------------------------------------------------------
   The page is birch: the material the work is actually made in.
   Warm pale ground, dark ink, and a burnished amber that appears
   only where the laser is working and where the visitor is meant
   to act.

   Colours are named by ROLE, not by material, because the same
   stylesheet serves both grounds. A few sections and every
   product canvas are dark chapters — those carry `.on-dark`,
   which swaps the same roles to their dark values. Anything
   inside them keeps working without a single extra rule.
   ============================================================ */

:root {
  /* -- Light ground: the page --------------------------------- */
  --ground:      #E9E1CE;  /* birch, the page itself             */
  --ground-deep: #DCD2BB;  /* a shade under it: wells, insets    */
  --raised:      #F4EEE0;  /* cards lifted off the ground        */
  --raised-hi:   #FBF7EE;  /* the same card, hovered             */

  --ink:         #221C15;  /* primary text                       */
  --ink-soft:    #5E5449;  /* secondary text, spec captions      */

  --rule:        rgba(34, 28, 21, 0.16);
  --rule-strong: rgba(34, 28, 21, 0.32);

  /* Amber has two jobs and needs two values. --ember is the fill:
     it only ever sits behind dark text. --accent is the same
     colour taken dark enough to be read AS text on the ground. */
  --ember:  #D9913F;
  --accent: #874B12;
  /* The amber fill is amber on both grounds, so what sits on it is
     fixed too — it must not follow --ground, which flips. */
  --on-ember: #1E1710;
  --glow:   #8A5314;       /* focus ring on the light ground     */

  /* -- Dark chapters ------------------------------------------
     The films, the business band, the footer and every product
     canvas. The beam, the crystal and the glass are all drawn
     with additive light, so they need darkness to exist at all. */

  /* -- Type -------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Fluid scale. Ratio ~1.28, loosening at the display sizes. */
  --t-micro: 0.6875rem;                          /* 11px — mono labels   */
  --t-tiny:  0.78125rem;                         /* 12.5px — captions    */
  --t-small: 0.9375rem;                          /* 15px                 */
  --t-body:  1.0625rem;                          /* 17px                 */
  --t-lead:  clamp(1.125rem, 0.35vw + 1.05rem, 1.3125rem);
  --t-h4:    clamp(1.1875rem, 0.4vw + 1.1rem, 1.4375rem);
  --t-h3:    clamp(1.5rem, 1vw + 1.25rem, 2rem);
  --t-h2:    clamp(2rem, 2.6vw + 1.35rem, 3.375rem);
  --t-h1:    clamp(2.75rem, 6.2vw + 1rem, 6rem);

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  /* Fraunces variation defaults. SOFT rounds the terminals and
     WONK swaps in the carved, off-axis glyph shapes — the reason
     this face was chosen over a conventional display serif. */
  --wonk-display: 'SOFT' 34, 'WONK' 1;
  --wonk-quiet:   'SOFT' 20, 'WONK' 0;

  /* -- Space ------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --measure:   68ch;
  --max-w:     84rem;

  /* -- Motion ------------------------------------------------ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  180ms;
  --dur-mid:   420ms;
  --dur-slow:  900ms;

  --radius:    3px;   /* machined edge, not a soft app corner */
  --radius-lg: 5px;
}

/* ------------------------------------------------------------
   A dark chapter. Same roles, swapped values — so every
   component inside simply works, with no duplicated rules.
   ------------------------------------------------------------ */

.on-dark {
  --ground:      #15120F;
  --ground-deep: #0C0A08;
  --raised:      #221D18;
  --raised-hi:   #2C251E;

  --ink:         #E9E0CD;
  --ink-soft:    #A0968B;

  --rule:        rgba(233, 224, 205, 0.14);
  --rule-strong: rgba(233, 224, 205, 0.28);

  --accent: #D9913F;   /* on darkness the raw amber reads fine */
  --glow:   #FFD9A0;

  background: var(--ground);
  color: var(--ink);
}