/* ==========================================================================
   Candor Digital Group — Design tokens
   Light-first, follows the system color scheme, with a manual override
   reflected through <meta name="color-scheme"> (see js/site.js).
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Raw palette ------------------------------------------------------ */
  --navy-950: #0d1220;
  --navy-900: #151b2c;
  --navy-800: #1d2438;
  --navy-700: #192038; /* brand navy (logo) */
  --navy-line: #283149;

  --stone-50: #fafaf7;
  --stone-100: #f2f1ec;
  --stone-200: #e4e3dc;
  --stone-ink: #ecebe5;

  --slate-600: #535a6b;
  --slate-300: #a1a8b6;

  --gold-500: #c4a23a; /* brand gold (logo crossbar) */
  --gold-400: #d6b75a;
  --gold-100: #f5efd8;

  --red-600: #b42318;
  --red-300: #f59e94;
  --green-700: #18794e;
  --green-300: #6fcf97;

  /* ---- Light / dark pairs ---------------------------------------------- */
  --bg-l: var(--stone-50);          --bg-d: var(--navy-950);
  --surface-l: var(--stone-100);    --surface-d: var(--navy-900);
  --raised-l: #ffffff;              --raised-d: var(--navy-800);
  --ink-l: var(--navy-700);         --ink-d: var(--stone-ink);
  --muted-l: var(--slate-600);      --muted-d: var(--slate-300);
  --line-l: var(--stone-200);       --line-d: var(--navy-line);
  --gold-l: var(--gold-500);        --gold-d: var(--gold-400);
  --gold-text-l: #7d6418;           --gold-text-d: var(--gold-400);
  --cta-bg-l: var(--navy-700);      --cta-bg-d: var(--gold-400);
  --cta-fg-l: #ffffff;              --cta-fg-d: var(--navy-950);
  --danger-l: var(--red-600);       --danger-d: var(--red-300);
  --success-l: var(--green-700);    --success-d: var(--green-300);

  /* ---- Semantic tokens: fallback for browsers without light-dark() ------ */
  --bg: var(--bg-l);
  --surface: var(--surface-l);
  --raised: var(--raised-l);
  --ink: var(--ink-l);
  --muted: var(--muted-l);
  --line: var(--line-l);
  --gold: var(--gold-l);
  --gold-text: var(--gold-text-l);
  --cta-bg: var(--cta-bg-l);
  --cta-fg: var(--cta-fg-l);
  --danger: var(--danger-l);
  --success: var(--success-l);

  @media (prefers-color-scheme: dark) {
    --bg: var(--bg-d);
    --surface: var(--surface-d);
    --raised: var(--raised-d);
    --ink: var(--ink-d);
    --muted: var(--muted-d);
    --line: var(--line-d);
    --gold: var(--gold-d);
    --gold-text: var(--gold-text-d);
    --cta-bg: var(--cta-bg-d);
    --cta-fg: var(--cta-fg-d);
    --danger: var(--danger-d);
    --success: var(--success-d);
  }

  @supports (color: light-dark(#000, #fff)) {
    --bg: light-dark(var(--bg-l), var(--bg-d));
    --surface: light-dark(var(--surface-l), var(--surface-d));
    --raised: light-dark(var(--raised-l), var(--raised-d));
    --ink: light-dark(var(--ink-l), var(--ink-d));
    --muted: light-dark(var(--muted-l), var(--muted-d));
    --line: light-dark(var(--line-l), var(--line-d));
    --gold: light-dark(var(--gold-l), var(--gold-d));
    --gold-text: light-dark(var(--gold-text-l), var(--gold-text-d));
    --cta-bg: light-dark(var(--cta-bg-l), var(--cta-bg-d));
    --cta-fg: light-dark(var(--cta-fg-l), var(--cta-fg-d));
    --danger: light-dark(var(--danger-l), var(--danger-d));
    --success: light-dark(var(--success-l), var(--success-d));
  }

  /* ---- Color scheme (base MUST stay "light dark") ----------------------- */
  color-scheme: light dark;

  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    color-scheme: dark;
  }
  &:has(> head > meta[name="color-scheme"][content="light"]) {
    color-scheme: light;
  }

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Fraunces", ui-serif, Georgia, serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
  --step-4: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --step-5: clamp(2.75rem, 1.5rem + 5.5vw, 5.5rem);

  /* ---- Space (8pt-ish) -------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-section: clamp(6rem, 4rem + 8vw, 10rem);

  --page-max: 72rem;
  --page-gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --prose: 38rem;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 700ms;

  --header-h: 4.5rem;
}