/* MineChef — design tokens (colour, spacing, radii). Owned by the "colour" piece.

   Palette intent — the page is one lit cave, read top to bottom, and it needs a REAL value range: true darks
   for the lantern light to burn against, and true brights only where the light is.
     dusk sky (near-black indigo zenith → deep violet → plum → rose → hot coral → gold at the sun)
       → sunlit grass
       → topsoil (warm umber)               0 m
       → clay    (lantern-lit ochre)       25 m   ← the one warm, light band; the mine's own light
       → stone   (dusky cool rose-brown)   50 m
       → deep    (dark slate indigo)      100 m
       → bedrock (near-black indigo)              ← as dark as the sky's zenith: the page starts and ends in the dark
   Panels are near-black glass with an amber lantern pool in one corner (a lit tunnel mouth), so body copy is
   near-white on near-black everywhere it sits on a panel.
   Amber lantern light is the ONE accent (eyebrows, ruler, card glow, CTA). The three gems are the only polychrome
   and belong to the logo, the CTA row and the feature icons — not to the walls. Everything else is warm cream ink. */
:root {
  color-scheme: dark;

  /* ---- Sky (dusk) — matches assets/scene/sky.svg. On desktop the fold shows the gradient from about a third of
     the way down, so the near-black has to reach that far: zenith and topbar sit in the dark, the lockup on
     violet→plum, the sun in a hot coral/gold band right above the ridge ---- */
  --sky-top: #0C0A22;      /* zenith: near-black indigo */
  --sky-mid: #8E4A82;      /* plum */
  --sky-rose: #CF5C74;
  --sky-glow: #F27A58;     /* hot coral, where the sun sits */
  --sky-peach: #FFB56C;    /* apricot */
  --sky-horizon: #FFE2A8;
  --sun: #FFF8DC;          /* the brightest thing on the page */
  --sun-warm: #FFD284;

  /* ---- Surface greens (grass, hills) ---- */
  --grass-lit: #ADD488;   /* sun-side slope */
  --grass: #79A868;
  --grass-shade: #45705E; /* dusk-side slope */
  --grass-edge: #6E9C6A;  /* the cut where turf meets earth */

  /* ---- Earth strata — the page digs down through these ----
     Each band is a real value AND hue step: warm umber → lit ochre → dusky cool stone → slate indigo → near-black.
     (topsoil stays close to the dirt strip painted at the foot of ground.svg, #5F3A2A, so the fold has no seam) */
  --earth-0: #5A3627;   /* topsoil, just under the grass (0 m) */
  --earth-1: #7A4B24;   /* ochre clay (25 m) — the warmest, lightest band: the lantern spill from the mine mouth */
  --earth-2: #46293A;   /* dusky stone (50 m) — a clear step down and cooler */
  --earth-3: #221B3A;   /* dark slate indigo (100 m) */
  --bedrock: #0D0B1B;   /* near-black indigo; also the body background */
  /* readable aliases for art/layout pieces */
  --strata-topsoil: var(--earth-0);
  --strata-clay: var(--earth-1);
  --strata-stone: var(--earth-2);
  --strata-deep: var(--earth-3);
  --strata-shadow: #07060F;       /* tunnel interiors, deepest shade: true black-indigo */
  --strata-highlight: #8E6140;    /* lit edge on a clay/topsoil ledge */

  /* ---- Mine furniture (timber, rails, iron) — for the illustration pieces ---- */
  --timber: #B0805A;
  --timber-lit: #D2A26F;
  --timber-dark: #6E4A34;
  --rail: #7C6A60;
  --iron: #3B2A2A;

  /* ---- Warm light — the single accent ---- */
  --lantern: #FFB347;
  --lantern-soft: #FFD37A;
  --lantern-hot: #FFF8E1;                    /* the flame / hottest core: near-white amber */
  --lantern-glow: rgba(255, 184, 92, 0.45);  /* halo colour, layer as needed */
  --lantern-glow-faint: rgba(255, 184, 92, 0.14);
  --ember: #E8735F;
  /* a ready-made lantern light pool: `background: var(--lantern-pool)` behind a card / block (transparent, no base) */
  --lantern-pool: radial-gradient(560px 340px at 40px 30px,
      rgba(255, 198, 112, 0.36) 0%,
      rgba(255, 184, 92, 0.12) 50%,
      rgba(255, 184, 92, 0.03) 100%);

  /* ---- Panels: near-black glass. Copy sits on this, not on the strata art behind it ---- */
  --panel: rgba(22, 13, 20, 0.80);           /* warm near-black; the strata still ghost through at 20% */
  --panel-solid: #19111A;

  /* ---- CTA (amber button) — same amber as the lantern ---- */
  --cta-top: #FFC857;
  --cta-bottom: #F2A93B;
  --cta-shadow: #C97A18;
  --cta-ink: #2A1830;

  /* ---- Ore accents — the only polychrome on the page (logo gems, CTA row, feature icons) ---- */
  --gem-teal: #4FD1C5;
  --gem-pink: #F97AA6;
  --gem-amber: #FFC857;
  --gem-violet: #B48EFF;

  /* ---- Text on dark ground — true brights, so copy is lit, not dusty ---- */
  --ink-strong: #FFFBF2;
  --ink: #FBF1E4;
  --ink-soft: #FBF1E4;                       /* near-white: >= 6.5:1 on the ochre clay band, ~14:1 on a panel */
  --ink-faint: rgba(255, 228, 182, 0.9);     /* lantern-tinted: ruler labels, footer */

  /* ---- Text on the sky (hero) ---- */
  --ink-hero: #FFFBF2;
  --ink-hero-shadow: rgba(22, 11, 28, 0.85);

  /* ---- Surfaces & lines (lantern-tinted so the cave reads as one light source) ---- */
  /* --surface is a lantern pool over near-black glass (a multi-layer gradient) — use it in `background`, not
     `background-color` */
  --surface: var(--lantern-pool), linear-gradient(var(--panel), var(--panel));
  --surface-color: var(--panel);                    /* flat fallback if a plain colour is needed */
  --surface-strong: radial-gradient(640px 380px at 40px 30px,
      rgba(255, 198, 112, 0.42) 0%,
      rgba(255, 184, 92, 0.15) 55%,
      rgba(255, 184, 92, 0.04) 100%),
    linear-gradient(var(--panel), var(--panel));
  --line: rgba(255, 200, 128, 0.3);
  --line-strong: rgba(255, 196, 110, 0.72);

  /* ---- Radii ---- */
  --r-pill: 999px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 8px;

  /* ---- Layout ---- */
  --measure: 62ch;
  --page-max: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
}