/* ============================================================
   Solto — design tokens (dark agency direction)
   Single source of truth. Bold deep-green ground, dusty-blush
   display type, warm cream text. Light tokens kept for later
   light sections. A palette/type change is one line here.
   ============================================================ */

:root {
  /* --- Dark ground (the hero + dark sections) --------------- */
  --ground: #14402b;          /* bold deep botanical green */
  --ground-deep: #0e2c1e;     /* one step down — vignette / depth */
  --ground-raise: #1a4d34;    /* one step up — subtle panels on dark */

  /* --- Brand color ----------------------------------------- */
  --blush: #e8c8b4;           /* dusty blush — the display type color on dark */
  --blush-bright: #f0d4c2;    /* a touch lighter, for emphasis */
  --terracotta: #c97b56;      /* warm accent, used sparingly (a rule, a hover) */

  /* --- Text ------------------------------------------------- */
  --cream: #faf6f2;           /* warm WHITE (cream killed 2026-06-30) — off-white on dark + light surface */
  --cream-muted: color-mix(in oklab, var(--cream) 66%, var(--ground));
  --cream-faint: color-mix(in oklab, var(--cream) 42%, var(--ground));
  --ink: #1a1a16;             /* warm near-black, for text on light surfaces */

  /* --- Light surface (warm white, not cream) ---------------- */
  --surface: #faf6f2;
  --hairline-dark: color-mix(in oklab, var(--cream) 18%, var(--ground));

  /* --- Semantic theme tokens (default = dark ground) --------
     Chrome + sections read these, so a page flips light by adding
     class "t-light", and a dark band inside a light page uses
     class "panel-dark". Home uses the defaults → unchanged. */
  --page-bg: var(--ground);
  --page-fg: var(--cream);
  --display-fg: var(--blush);
  --muted-fg: var(--cream-muted);
  --faint-fg: var(--cream-faint);
  --rule: var(--hairline-dark);
  color-scheme: dark;   /* default pages are dark → native controls/scrollbars match */

  /* --- Type ------------------------------------------------
     Display = condensed grotesque, switched per variant via the
     .type-* class below. Body = Satoshi. */
  --font-condensed: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --display-weight: 700;
  --display-transform: none;
  --display-tracking: -0.005em;
  --display-leading: 0.96;

  /* Fluid scale — condensed reads narrow, so it can run large. */
  --type-hero:    clamp(1.85rem, 1.05rem + 2.7vw, 3.6rem);
  --type-display: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --type-lead:    clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --type-body:    1.0625rem;        /* 17px */
  --type-small:   0.875rem;
  --type-mono:    0.78rem;

  --leading-body: 1.6;
  --tracking-mono: 0.18em;

  /* --- Measure & layout ------------------------------------ */
  --measure: 60ch;
  --page-max: 1440px;
  --gutter: clamp(1.25rem, 0.5rem + 3.4vw, 4.5rem);

  /* --- Space ------------------------------------------------ */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-3xl: clamp(6rem, 4rem + 9vw, 11rem);

  /* --- Motion (transform/opacity only; nothing bounces) ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.2, 1);
  --dur-reveal: 760ms;
  --dur-hover: 260ms;
  --reveal-rise: 1.1rem;

  --radius: 2px;
  --focus-ring: 2px solid var(--blush);
}

/* Light page: cream ground, ink text, green display. */
.t-light {
  --page-bg: var(--surface);
  --page-fg: var(--ink);
  --display-fg: var(--ground);
  --muted-fg: color-mix(in oklab, var(--ink) 62%, var(--surface));
  --faint-fg: color-mix(in oklab, var(--ink) 42%, var(--surface));
  --rule: color-mix(in oklab, var(--ink) 15%, var(--surface));
  color-scheme: light;
}

/* A dark band dropped inside a light page (the leader's scene). */
.panel-dark {
  --page-fg: var(--cream);
  --display-fg: var(--blush);
  --muted-fg: var(--cream-muted);
  --faint-fg: var(--cream-faint);
  --rule: var(--hairline-dark);
  background: var(--ground);
  color: var(--cream);
}

/* A full-bleed blush band (ink text, green display). */
.panel-blush {
  --page-fg: var(--ink);
  --display-fg: var(--ground);
  --muted-fg: color-mix(in oklab, var(--ink) 56%, var(--blush));
  --faint-fg: color-mix(in oklab, var(--ink) 40%, var(--blush));
  --rule: color-mix(in oklab, var(--ink) 16%, var(--blush));
  background: var(--blush);
  color: var(--ink);
}