/* ==========================================================================
   CBC — Design Tokens
   Derived from Master Pitch Deck v3. Rust primary, slate secondary, no third hue.
   ========================================================================== */

:root,
[data-theme='light'] {
  /* ---- Type scale — 8 steps, nothing off-ladder --------------------------
     2xs  11px      micro caps (wordmark tag, tile side labels)
     xs   12–13px   eyebrows, chips, arrow links, meta
     sm   14–15px   card body, nav, excerpts, captions
     base 16–17px   default body copy
     lg   17–21px   ledes and card titles
     xl   22–32px   section titles
     2xl  32–52px   CTA and page display headings
     3xl  40–88px   hero display only
     -------------------------------------------------------------------- */
  --text-2xs: 0.6875rem;
  --text-xs: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.14vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.05rem + 1.15vw, 2rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4.2vw, 5.5rem);

  /* ---- Weights — three, and only three -------------------------------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* ---- Tracking --------------------------------------------------------
     tight     large display-font headings
     display   the signature wide-tracked caps headline
     caps      every Questrial spaced-caps label
     caps-sm   Satoshi caps (buttons, sub-heads)
     -------------------------------------------------------------------- */
  --track-tight: -0.01em;
  --track-display: 0.055em;
  --track-caps: 0.18em;
  --track-caps-sm: 0.1em;

  /* ---- Line heights ---------------------------------------------------- */
  --lh-tight: 1.1;
  --lh-snug: 1.32;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Surfaces -------------------------------------------------------- */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f8f8f8;
  --color-surface-offset: #f2f2f2;
  --color-divider: #e6e6e6;
  --color-slate-wash: #f3f5f5;
  --color-border: #d6d6d6;

  /* ---- Text ------------------------------------------------------------ */
  --color-text: #1a1a1a;
  --color-text-muted: #5a5a5a;
  --color-text-faint: #8c8c8c;
  --color-text-inverse: #ffffff;

  /* ---- Rust: the primary accent (~90% of all color) -------------------- */
  --color-primary: #a64a40;
  --color-primary-hover: #823a32;
  --color-primary-active: #6f312b;
  --color-primary-tint: #e9c8c5;
  --color-primary-wash: #fbf4f3;

  /* ---- Slate: the only secondary accent -------------------------------- */
  --color-slate: #66787c;
  --color-slate-hover: #4c595c;
  --color-slate-tint: #dbe0e1;
  --color-slate-pale: #cad2d4;

  /* ---- Navy: quiet third, used rarely ---------------------------------- */
  --color-navy: #303d52;

  /* ---- Display headline lead (the muted half of "BUILT FOR ___.") ------ */
  --color-display-lead: #8c8c8c;

  /* ---- Functional (forms only) ----------------------------------------- */
  /* Validation states stay inside the warm family — no fourth hue. */
  --color-success: #4c595c;
  --color-error: #a32116;

  /* ---- Radius: tight, matching the deck's card treatment --------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ---- Motion ---------------------------------------------------------- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Shadows: barely there ------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 30 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.2 0.02 30 / 0.07);
  --shadow-lg: 0 16px 40px oklch(0.2 0.02 30 / 0.1);

  /* ---- Content widths -------------------------------------------------- */
  --content-narrow: 640px;
  --content-prose: 72ch;
  --content-default: 1100px;
  --content-wide: 1600px;
  --gutter: clamp(var(--space-5), 3.5vw, var(--space-12));

  /* ---- Structural constants (deck motifs) ------------------------------ */
  --rule-height: 5px; /* the full-width rust rule under page titles */
  --header-height: 4.75rem; /* 76px at the 16px base */

  /* ---- Rust gradient surfaces ------------------------------------------
     Deliberately NOT themed. Every rust band is a fixed, saturated surface
     that carries white text in both light and dark mode — the same way the
     rust bar behaves on every page of the deck. */
  /* The approved hero ramp: dark rust on the left to rust on the right, flat
     across, no vertical variation. Used by every page-head band and every CTA
     band. Deliberately separate from --gradient-rust, which is the older 115deg
     surface ramp still used by inline rust panels. */
  --gradient-hero: linear-gradient(90deg, #51241F 0%, #7C3730 50%, #A64A40 100%);
  --gradient-rust: linear-gradient(115deg, #6f312b 0%, #a64a40 55%, #b4574c 100%);
  --gradient-rust-deep: linear-gradient(160deg, #5e2a25 0%, #823a32 48%, #a64a40 100%);
  --gradient-rust-soft: linear-gradient(160deg, #823a32 0%, #a64a40 100%);
  --rust-hatch: repeating-linear-gradient(
    115deg,
    rgb(255 255 255 / 0.05) 0px,
    rgb(255 255 255 / 0.05) 1px,
    transparent 1px,
    transparent 58px
  );

  /* ---- Fonts ----------------------------------------------------------- */
  --font-display: 'Switzer', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-eyebrow: 'Questrial', 'Switzer', 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Dark mode — warm near-black, never cold gray. Rust lifts, slate lifts.
   ========================================================================== */

[data-theme='dark'] {
  --color-bg: #14100f;
  --color-surface: #1a1a1a;
  --color-surface-2: #202020;
  --color-surface-offset: #262626;
  --color-divider: #2c2c2c;
  --color-slate-wash: #232c2e;
  --color-border: #383838;

  --color-text: #e8e3e0;
  --color-text-muted: #a39b98;
  --color-text-faint: #7a7270;
  --color-text-inverse: #14100f;

  --color-primary: #d0796b;
  --color-primary-hover: #e09285;
  --color-primary-active: #eaa79b;
  --color-primary-tint: #4a2c27;
  --color-primary-wash: #221816;

  --color-slate: #9aacb0;
  --color-slate-hover: #b4c3c6;
  --color-slate-tint: #2c3538;
  --color-slate-pale: #394548;

  --color-navy: #7c8ba6;

  --color-display-lead: #7a7270;

  --color-success: #9fb0b3;
  --color-error: #e07a6c;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55);
}

@media (prefers-color-scheme: no-preference-forced-off) {
  :root:not([data-theme]) {
    --color-bg: #14100f;
    --color-surface: #1a1a1a;
    --color-surface-2: #202020;
    --color-surface-offset: #262626;
    --color-divider: #2c2c2c;
    --color-slate-wash: #232c2e;
    --color-border: #383838;
    --color-text: #e8e3e0;
    --color-text-muted: #a39b98;
    --color-text-faint: #7a7270;
    --color-text-inverse: #14100f;
    --color-primary: #d0796b;
    --color-primary-hover: #e09285;
    --color-primary-active: #eaa79b;
    --color-primary-tint: #4a2c27;
    --color-primary-wash: #221816;
    --color-slate: #9aacb0;
    --color-slate-hover: #b4c3c6;
    --color-slate-tint: #2c3538;
    --color-slate-pale: #394548;
    --color-navy: #7c8ba6;
    --color-display-lead: #7a7270;
  }
}