/* ============================================================
   Smelteon — Design Tokens
   One flat canvas. Depth is a hairline plus one opaque tonal step.
   Colour thread: molten orange -> amber -> cooling cyan (solid only).
   Edit here only. No one-off hex values anywhere else.
   ============================================================ */

:root {
  /* ---- Canvas ---- */
  --bg-base:     #06070a;
  --bg-elevated: #0f1117;

  /* ---- Surfaces: exactly one opaque step above the canvas ---- */
  --surface-1: #0f1117;
  --surface-2: #161922;
  --surface-3: #1d212c;

  /* ---- Text ramp (all AA on --bg-base and --surface-1) ---- */
  --text-primary:   #f4f5f8;
  --text-secondary: #bfc4d1;
  --text-muted:     #959bad;
  --text-faint:     #858b9d;
  --text-on-accent: #160700;

  /* ---- Hairlines (components only — never between sections) ---- */
  --border-subtle:  #1c1f28;
  --border-default: #2a2e3a;
  --border-strong:  #3a3f4d;
  --ring:           #ffc48a;

  /* ---- Accent ---- */
  --accent:        #ff6a1f;
  --accent-hover:  #ff8442;
  --accent-press:  #e85712;
  --accent-2:      #ffb020;
  --accent-3:      #38bdf8;
  --molten-rim:    #ffcf5c;
  --accent-soft:   #2a1308;   /* opaque tint of the accent on the canvas */
  --accent-line:   #6b2d10;
  --accent-2-soft: #2a1f08;
  --accent-3-soft: #0a1f2a;
  --accent-3-line: #164a63;

  /* ---- Semantic ---- */
  --success: #34d399; --success-soft: #0a2219;
  --warning: #fbbf24; --warning-soft: #2a2108;
  --error:   #fb7185; --error-soft:   #2a0f14;
  --info:    #38bdf8; --info-soft:    #0a1f2a;

  /* ---- Typography ----
     Space Grotesk: the display face, matching the wordmark in the logo.
     Cabin: humanist text and interface. Cousine: heat
     numbers, pour temperatures, mould IDs and every label. */
  --font-sans: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Cabin", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Cousine", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.35rem + 4.4vw, 4.9rem);
  --fs-h1:      clamp(2.2rem, 1.4rem + 3.3vw, 3.9rem);
  --fs-h2:      clamp(1.875rem, 1.3rem + 2.3vw, 3.15rem);
  --fs-h3:      clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-h4:      clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
  --fs-body:    1rem;
  --fs-body-lg: 1.0625rem;
  --fs-small:   .9375rem;
  --fs-xs:      .8125rem;
  --fs-micro:   .75rem;

  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-body:  1.65;

  /* ---- Spacing (4-pt base / 8-pt rhythm) ---- */
  --space-0: 0;     --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-28: 112px;--space-32: 128px;--space-40: 160px;

  /* ---- Radii: squared, like the display face ---- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 999px;

  /* ---- Containers ---- */
  --container-sm: 680px;  --container-md: 840px;  --container-lg: 1080px;
  --container-xl: 1240px; --container-2xl: 1360px;
  --gutter: clamp(16px, 4.4vw, 48px);
  --measure: 68ch;

  /* ---- Section rhythm ---- */
  --section-y: clamp(80px, 9vw, 144px);
  --section-y-lg: clamp(96px, 11vw, 176px);
  --head-gap: clamp(40px, 4.5vw, 72px);
  --stack: clamp(16px, 2vw, 24px);

  /* ---- Scroll-track lengths ---- */
  --track-short: 160vh;
  --track:       260vh;
  --track-long:  360vh;

  /* ---- Grid ---- */
  --grid-gap: clamp(16px, 1.8vw, 24px);

  /* ---- Motion ---- */
  --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 520ms; --dur-slower: 800ms;
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Runtime state (driven by JS) ---- */
  --p: 0;
  --nav-h: 68px;
}