/* ==========================================================================
   Better Tomorrow Trust — Design Tokens
   Single source of truth for colour, typography, spacing, motion.

   Palette derived directly from the BTT logo (red "Better" · green "Tomorrow"
   · blue "Trust", black figures on white). Each brand colour is refined for
   screen + WCAG AA and given a role:
     • BLUE  = primary / trust   (navigation, links, primary actions)
     • RED   = donate / emphasis (passion, urgency)
     • GREEN = impact / success  (grant amounts, counters, positive)
   All sit on a sophisticated near-black + off-white neutral canvas so the
   bright brand colours read as premium accents, not noise.
   ========================================================================== */

:root {
  /* ---- Blue — primary / trust ---- */
  --blue-950: #0e1442;
  --blue-900: #141c5e;
  --blue-800: #1b2680;
  --blue-700: #22309c; /* PRIMARY (AA on white) */
  --blue-600: #2c40c0; /* hover */
  --blue-500: #3a53e0; /* interactive / bright */
  --blue-400: #6f83ec;
  --blue-300: #a6b4f5;
  --blue-200: #d0d8fa;
  --blue-100: #e7ecfd;
  --blue-050: #f3f6fe;

  /* ---- Green — impact / success / hope ---- */
  --green-800: #075e34;
  --green-700: #0a7a43; /* text on white (AA) */
  --green-600: #0e9a55;
  --green-500: #16b866; /* bright — pops on dark */
  --green-400: #4bd08c;
  --green-200: #c7efd7;
  --green-100: #e4f7ec;
  --green-050: #f0fbf4;

  /* ---- Red — donate / emphasis / passion ---- */
  --red-800: #9e141b;
  --red-700: #c01a22;
  --red-600: #dd2029; /* DONATE primary */
  --red-500: #ec2b34; /* bright — logo-like */
  --red-200: #fbd0d2;
  --red-100: #fde8e9;
  --red-050: #fef3f3;

  /* ---- Neutrals (cool near-black → off-white) ---- */
  --ink-900: #12131a; /* body text / headings */
  --ink-800: #20222c;
  --ink-700: #33353f;
  --ink-600: #474a56;
  --ink-500: #5a5d6b; /* secondary text */
  --ink-400: #868997;
  --ink-300: #c3c5cf;
  --line: #e8e9ef;      /* hairline borders */
  --line-strong: #d7d9e2;
  --surface: #ffffff;   /* cards */
  --surface-2: #f8f9fc; /* page background */
  --surface-3: #f1f3f8; /* subtle section band */

  /* ---- Semantic ---- */
  --success-600: #0e9a55;
  --success-100: #e4f7ec;
  --info-600: #2c40c0;
  --focus: #3a53e0;
  --white: #ffffff;

  /* ---- Semantic aliases (prefer these in components) ---- */
  --color-primary: var(--blue-700);
  --color-primary-hover: var(--blue-600);
  --color-accent: var(--green-600);
  --color-donate: var(--red-600);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-bg: var(--surface-2);
  --color-card: var(--surface);
  --color-border: var(--line);

  /* ---- Typography ---- */
  --font-display: "Riffic Bold", "Poppins", "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Source Sans Pro",
    "Segoe UI", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid type scale (min → max via clamp, ~1.25 ratio) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.5rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.14em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, cool-tinted, layered) ---- */
  --shadow-xs: 0 1px 2px rgba(18, 19, 26, 0.06);
  --shadow-sm: 0 2px 8px rgba(18, 19, 26, 0.06);
  --shadow: 0 8px 24px rgba(18, 19, 26, 0.08);
  --shadow-lg: 0 18px 48px rgba(18, 19, 26, 0.12);
  --shadow-glow: 0 12px 40px rgba(34, 48, 156, 0.20);

  /* ---- Gradients (refined; brand colours as accents) ---- */
  --grad-brand: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  --grad-hero: radial-gradient(120% 130% at 12% 8%, #1b2688 0%, #141c5e 52%, #0d1240 100%);
  --grad-accent: linear-gradient(135deg, var(--green-600), var(--green-500));
  --grad-wash: linear-gradient(180deg, var(--surface-2), var(--blue-050));

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 520ms;
  --reveal-dur: 700ms;

  /* ---- z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --reveal-dur: 0ms;
  }
}