/* ═══════════════════════════════════════════════════════════════════════
   Gestu — DESIGN TOKENS
   "Norse-Luxury Cybernetic" / "Sovereign Terminal"
   Two-tone dialogue: Gestu's Gold (wisdom / advisor) vs Seeker's Frost
   (cold water of Jötunheimr / user turns / telemetry).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── CORE PALETTE ───────────────────────────────────────────────── */
  --gold:            #E8C879;   /* Gestu's Gold — advisor voice, primary action */
  --gold-bright:     #F6E2AE;
  --gold-deep:       #B99546;
  --gold-ink:        #2A2010;

  --frost:           #7DD3FC;   /* Seeker Frost — cold water, telemetry */
  --frost-bright:    #B6E7FE;
  --frost-deep:      #3E9BC9;

  --obsidian:        #0B0E14;   /* canvas */
  --obsidian-void:   #000000;   /* pure OLED, contrast surfaces */
  --surface-1:       #111622;   /* base containers */
  --surface-2:       #171E2D;   /* elevated cards */
  --hairline:        #232C3D;   /* hairline borders */

  --sage:            #8A9A86;   /* Embalmed Sage — system status, healthy */
  --warn:            #D98A6A;
  --trap:            #C4645A;
  --trap-surface:    #1A1114;
  --trap-hairline:   #3A2224;

  /* ── TEXT ───────────────────────────────────────────────────────── */
  --ink:             #EEF2F8;
  --ink-2:           #A8B3C6;
  --ink-3:           #6E7A90;
  --ink-4:           #48536A;

  /* ── DERIVED / ALPHA ────────────────────────────────────────────── */
  --gold-a08:  color-mix(in srgb, var(--gold) 8%, transparent);
  --gold-a14:  color-mix(in srgb, var(--gold) 14%, transparent);
  --gold-a24:  color-mix(in srgb, var(--gold) 24%, transparent);
  --gold-a40:  color-mix(in srgb, var(--gold) 40%, transparent);
  --frost-a08: color-mix(in srgb, var(--frost) 8%, transparent);
  --frost-a16: color-mix(in srgb, var(--frost) 16%, transparent);
  --frost-a32: color-mix(in srgb, var(--frost) 32%, transparent);
  --sage-a16:  color-mix(in srgb, var(--sage) 16%, transparent);

  /* ── FORGED-METAL SURFACE PRIMITIVES ────────────────────────────────
     Hairline dual-tone inlaid border: gold edge → frost edge. */
  --inlay: linear-gradient(140deg,
             var(--gold-a40) 0%,
             color-mix(in srgb, var(--gold) 6%, transparent) 34%,
             color-mix(in srgb, var(--frost) 5%, transparent) 66%,
             var(--frost-a32) 100%);
  --inlay-soft: linear-gradient(140deg,
             var(--gold-a14) 0%,
             transparent 40%,
             transparent 62%,
             var(--frost-a16) 100%);

  --bevel: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
           inset 0 -1px 0 color-mix(in srgb, #000 55%, transparent);

  --card-face: linear-gradient(168deg, var(--surface-2) 0%, var(--surface-1) 62%, #0E131E 100%);

  /* ── HALOS ──────────────────────────────────────────────────────── */
  --halo-gold:  radial-gradient(circle,
                  color-mix(in srgb, var(--gold) 26%, transparent) 0%,
                  color-mix(in srgb, var(--gold) 9%, transparent) 38%,
                  transparent 70%);
  --halo-frost: radial-gradient(circle,
                  color-mix(in srgb, var(--frost) 22%, transparent) 0%,
                  color-mix(in srgb, var(--frost) 7%, transparent) 40%,
                  transparent 72%);

  /* ── RADII ──────────────────────────────────────────────────────── */
  --r-xs: 0.5rem;
  --r-sm: 0.75rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;      /* rounded-[2rem] */
  --r-2xl: 2.5rem;   /* rounded-[2.5rem] */
  --r-pill: 999px;
  --r-foot: 4rem;    /* rounded-t-[4rem] */

  /* ── SPACE / RHYTHM ─────────────────────────────────────────────── */
  --shell: 78rem;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 11vh, 9.5rem);
  --stack-y: clamp(2rem, 5vh, 4rem);

  /* ── TYPE SCALE ─────────────────────────────────────────────────── */
  --f-sans:  "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-display: "Cinzel", "Cormorant Garamond", "Playfair Display", Georgia,
             "Times New Roman", serif;
  --f-serif: "Cormorant Garamond", "Cormorant", "Playfair Display", Georgia,
             "Times New Roman", serif;
  --f-mono:  "JetBrains Mono", "SFMono-Regular", "SF Mono", Consolas,
             "Liberation Mono", Menlo, monospace;

  /* Hero display size is composed in sections.css against the viewport, so
     the headline, lede, and spec bar all fit one fold. */
  --t-h2:     clamp(2rem, 5vw, 3.9rem);
  --t-h3:     clamp(1.3rem, 2.6vw, 2rem);
  --t-lede:   clamp(1.02rem, 1.5vw, 1.28rem);
  --t-body:   clamp(0.94rem, 1.1vw, 1.03rem);
  --t-small:  0.83rem;
  --t-micro:  0.68rem;

  --track-wide: 0.24em;
  --track-mid:  0.1em;
  --track-tight: -0.022em;

  /* ── MOTION ─────────────────────────────────────────────────────── */
  --ease-forge: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-deep:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   160ms;
  --dur-mid:    340ms;
  --dur-slow:   620ms;

  /* ── LAYERS ─────────────────────────────────────────────────────── */
  --z-texture: 1;
  --z-content: 2;
  --z-nav:     60;
  --z-drawer:  55;
  --z-boot:    90;
}

/* Respect the seeker's own pace. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-mid: 1ms;
    --dur-slow: 1ms;
  }
}