/* ══════════════════════════════════════════════════════════════════════
   APEX FOUR VENTURES — DESIGN TOKENS (single source of truth)
   Colours, type scale, spacing, radius and shadows, light and dark, for the
   website, the client portal, /pay and /verify. Loaded first on every page;
   base.css, site.css and portal/portal.css use these through var(--…).
   Change a value here and it changes everywhere.

   Breakpoints (media queries cannot use variables), used across the CSS:
     1100px wide → tablet · 900px two columns → one · 768px tablet ·
     720 / 640 / 560px phones · 420 / 380px small phones
   ══════════════════════════════════════════════════════════════════════ */

:root, [data-theme="light"] {
  /* ── Brand colours ── */
  /* Brand blue darkened slightly so text and buttons meet WCAG AA contrast (4.5:1) */
  --fb-blue: #1464d4;          /* links, icons, blue text */
  --fb-blue-h: #0f56b8;        /* hover */
  --fb-blue-fill: #1464d4;     /* blue backgrounds behind white text */
  --fb-blue-fill-h: #0f56b8;
  --fb-blue-soft: #e7f3ff;     /* tinted backgrounds, chips */
  --fb-on-blue: #ffffff;       /* text on blue */
  --emerald: #31a24c;          /* success, paid, done */
  --emerald-soft: #e6f4ea;

  /* ── Surfaces ── */
  --bg: #f0f2f5;               /* page canvas */
  --bg-alt: #f0f2f5;           /* alternate sections */
  --bg-surface: #ffffff;       /* cards, panels, menus */
  --bg-surface-elev: #ffffff;
  --fb-hover: #f2f2f2;         /* row / menu item hover */
  --fb-btn2: #e4e6eb;          /* secondary buttons, tracks */
  --fb-btn2-h: #d8dadf;
  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.7);

  /* ── Text ── */
  --heading: #050505;
  --heading-alt: #1c1e21;
  --text: #1c1e21;
  --text-muted: #65676b;
  --text-dim: #8a8d91;

  /* ── Borders ── */
  --border: #dddfe2;
  --border-light: #e4e6eb;
  --border-dark: #ced0d4;

  /* ── Badges ── */
  --badge-bg: #e7f3ff;
  --badge-text: #1464d4;
  --badge-border: #e7f3ff;

  /* ── Typography: one family (system UI stack, set in base.css), fixed roles ── */
  --fs-h1: clamp(2rem, 1.3rem + 2.3vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.15vw, 2rem);
  --fs-h3: 1.125rem;
  --fs-h4: 1.0625rem;
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-badge: 0.72rem;
  --lh-tight: 1.15;
  --lh-head: 1.25;
  --lh-body: 1.6;
  --measure: 66ch;             /* comfortable line length */

  /* ── Spacing ── */
  --sp-section: clamp(44px, 2.4vw + 30px, 68px);   /* between page sections */
  --sp-head: 28px;             /* section heading block → content */
  --gap: 20px;                 /* grid gaps */
  --card-pad: 22px;            /* inside cards */

  /* ── Radius: use these, not raw numbers ── */
  --r-sm: 6px;                 /* inputs, small chips */
  --r-md: 8px;                 /* buttons, small cards */
  --r-lg: 12px;                /* cards and panels */
  --r-pill: 999px;             /* pills, filter chips */

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
  --glass-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.07);
  --glass-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.07), 0 14px 32px rgba(16, 24, 40, 0.10);
  --shadow-clay: none;
  --shadow-gold: none;

  /* ── Older names, kept so existing rules keep working. Prefer the names above. ── */
  --claude-clay: var(--fb-blue);
  --claude-clay-h: var(--fb-blue-h);
  --claude-clay-soft: var(--fb-blue-soft);
  --claude-clay-glow: rgba(24, 119, 242, 0.2);
  --french-blue: var(--fb-blue);
  --french-blue-h: var(--fb-blue-h);
  --french-blue-soft: var(--fb-blue-soft);
  --french-blue-glow: rgba(24, 119, 242, 0.2);
  --french-navy: #050505;
  --gold: #1464d4;
  --gold-light: #e7f3ff;
  --gold-glow: rgba(24, 119, 242, 0.15);
  --bg-navy-panel: #ffffff;
  --bg-navy-panel-alt: #f0f2f5;
  --text-navy-panel: #1c1e21;
  --text-navy-muted: #65676b;
  --border-navy: #dddfe2;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
}

/* Dark theme: only the tokens that change */
[data-theme="dark"] {
  /* ── Brand colours ── */
  --fb-blue: #5aa7ff;          /* links and blue text on dark backgrounds */
  --fb-blue-h: #7cb8ff;
  --fb-blue-fill: #1a66cc;     /* blue backgrounds behind white text */
  --fb-blue-fill-h: #2370d8;
  --fb-blue-soft: rgba(45, 136, 255, 0.2);
  --emerald: #45bd62;
  --emerald-soft: rgba(69, 189, 98, 0.15);

  /* ── Surfaces ── */
  --bg: #18191a;
  --bg-alt: #18191a;
  --bg-surface: #242526;
  --bg-surface-elev: #242526;
  --fb-hover: #3a3b3c;
  --fb-btn2: #3a3b3c;
  --fb-btn2-h: #4e4f50;
  --glass-bg: rgba(36, 37, 38, 0.84);
  --glass-border: rgba(255, 255, 255, 0.07);

  /* ── Text ── */
  --heading: #e4e6eb;
  --heading-alt: #e4e6eb;
  --text: #e4e6eb;
  --text-muted: #b0b3b8;

  /* ── Borders ── */
  --border: #3e4042;
  --border-light: #3a3b3c;
  --border-dark: #4e4f50;

  /* ── Badges ── */
  --badge-bg: rgba(45, 136, 255, 0.2);
  --badge-text: #4599ff;
  --badge-border: transparent;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.22);
  --glass-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.3);

  /* ── Older names ── */
  --french-navy: #e4e6eb;
  --gold: #2d88ff;
  --gold-light: rgba(45, 136, 255, 0.2);
  --bg-navy-panel: #242526;
  --bg-navy-panel-alt: #3a3b3c;
  --text-navy-panel: #e4e6eb;
  --text-navy-muted: #b0b3b8;
  --border-navy: #3e4042;
}

/* Phones: tighter spacing */
@media (max-width: 640px) {
  :root {
    --gap: 14px;
    --sp-head: 20px;
    --card-pad: 18px;
  }
}

/* Printing (portal documents, capability statement): always the light colours */
@media print {
  :root, [data-theme="dark"] {
    --bg: #f0f2f5;
    --bg-surface: #fff;
    --text: #1c1e21;
    --heading: #050505;
    --text-muted: #65676b;
    --border: #dddfe2;
    --fb-btn2: #e4e6eb;
    --fb-blue-soft: #e7f3ff;
    --emerald-soft: #e6f4ea;
  }
}