/* ==========================================================================
   eVal Advisors — design tokens
   thinkeval.com · static site (Cloudflare Pages)

   1. Raw palette          (--c-*)   never used directly by components
   2. Type, space, grid    (--fs-*, --sp-*, --container …)
   3. Theme sets           (.theme-dark / .theme-light / .theme-alt)
      Components only read the semantic tokens set here (--bg, --fg-heading,
      --fg-body, --fg-accent, --pill-bg, --ramp-1 …), so every component has
      a dark and a light version for free: wrap it in a section that carries
      one of the three theme classes.
   ========================================================================== */

:root {
  /* ---- 1. Raw palette ------------------------------------------------- */
  /* Brand (from the logo) */
  --c-logo-navy: #00004A;
  --c-sky: #34B4F9;          /* logo sky blue: focus rings on dark, small highlights */
  --c-sky-ink: #0B86C9;      /* sky for light backgrounds (3.99:1 on white) */

  /* Accent ramp */
  --c-royal: #4674E1;        /* rules, icons, headline accents (large text) */
  --c-royal-ink: #3760D2;    /* filled buttons and small text on white (5.58:1) */
  --c-royal-deep: #2E53BD;   /* hover */
  --c-periwinkle: #8FADEB;
  --c-mist: #DCE6F8;
  --c-navy-deep: #203876;    /* callout fill, third ramp step on white */

  /* Dark set */
  --c-dk-0: #070A14;         /* gradient start (top-left), footer */
  --c-dk-1: #0A183C;         /* gradient end (bottom-right) */
  --c-dk-glow: #1E3572;      /* soft glow, bottom-right corner */
  --c-dk-heading: #F0F4FC;
  --c-dk-heading-accent: #9DB4EC;
  --c-dk-body: #DCE4F8;
  --c-dk-muted: #AAB7D8;     /* captions, meta (10.2:1 on #0A183C) */
  --c-dk-pill: #0B1B42;
  --c-dk-surface: rgba(255, 255, 255, 0.045);
  --c-dk-surface-hover: rgba(255, 255, 255, 0.09);
  --c-dk-border: rgba(220, 228, 248, 0.18);

  /* Light set */
  --c-lt-bg: #FFFFFF;
  --c-lt-bg-alt: #F4F6FB;
  --c-lt-heading: #0B1638;
  --c-lt-body: #475273;
  --c-lt-muted: #5F6A86;     /* captions, meta (4.98:1 on #F4F6FB) */
  --c-lt-pill: #E8EEFC;
  --c-lt-border: #D9DFEE;
  --c-lt-surface-hover: #E8EEFC;

  /* Shared */
  --c-divider: #727B90;      /* thin divider lines, both themes */
  --c-white: #FFFFFF;

  /* Charts */
  --c-chart-1: #245ADB;
  --c-chart-2: #86A4EB;
  --c-chart-grid: #727B90;

  /* ---- 2. Type --------------------------------------------------------- */
  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* size / line-height / letter-spacing / weight — desktop values; mobile overrides below */
  --fs-display: 72px;  --lh-display: 1.02; --ls-display: -0.025em; --fw-display: 300;  /* home hero H1 */
  --fs-h1: 56px;       --lh-h1: 1.06;      --ls-h1: -0.02em;       --fw-h1: 300;       /* inner page H1 */
  --fs-h2: 44px;       --lh-h2: 1.12;      --ls-h2: -0.015em;      --fw-h2: 300;
  --fs-h3: 28px;       --lh-h3: 1.25;      --ls-h3: -0.01em;       --fw-h3: 400;
  --fs-h4: 20px;       --lh-h4: 1.35;      --ls-h4: -0.005em;      --fw-h4: 500;
  --fs-statement: 40px;--lh-statement: 1.2;--ls-statement: -0.015em;                  /* large-type statement */
  --fs-stat: 104px;    --lh-stat: 1;       --ls-stat: -0.03em;     --fw-stat: 200;     /* big stat words */
  --fs-lead: 21px;     --lh-lead: 1.5;
  --fs-body: 17px;     --lh-body: 1.65;
  --fs-small: 15px;    --lh-small: 1.5;
  --fs-caption: 13px;  --lh-caption: 1.45;
  --fs-label: 12px;    --lh-label: 1;      --ls-label: 0.08em;     --fw-label: 600;    /* pill labels, uppercase */
  --fs-nav: 15px;
  --fs-button: 16px;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 128px;
  --section-y: 112px;          /* vertical padding of a standard section */
  --section-y-compact: 72px;   /* inner page headers, contact band */
  --stack: 24px;               /* default gap between text blocks */

  /* ---- Grid ------------------------------------------------------------ */
  --container: 1200px;         /* content max width (120px side margins at 1440) */
  --container-narrow: 760px;   /* long-form text */
  --cols: 12;
  --gutter: 32px;
  --margin: 48px;              /* page side margin below the container max */
  --header-h: 88px;            /* compact header (after scrolling) */
  --header-h-x: 184px;         /* expanded header at the top of the page: the logo starts large and shrinks on scroll */
  --logo-h: 60px;
  --logo-h-x: 128px;

  /* ---- Radii ----------------------------------------------------------- */
  --r-xs: 4px;    /* tags, checkboxes */
  --r-btn: 0;     /* buttons are square */
  --r-input: 0;   /* inputs match the buttons */
  --r-sm: 8px;    /* menu items, small chips */
  --r-md: 12px;   /* cards, callout, photos, dropdown */
  --r-lg: 16px;   /* large media */
  --r-pill: 999px;

  /* ---- Borders --------------------------------------------------------- */
  --bw-hair: 1px;      /* dividers, card borders */
  --bw-rule: 3px;      /* left rule on cards */
  --bw-accent: 4px;    /* top rule on feature rows */
  --bw-focus: 2px;

  /* ---- Motion ---------------------------------------------------------- */
  --dur: 160ms;                              /* hover colour shifts */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-dur: 650ms;                       /* scroll reveal: rise from below */
  --reveal-y: 28px;
  --reveal-stagger: 70ms;
  --header-scroll-range: 180px;              /* scroll distance over which the header compresses */
}

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --margin: 32px;
    --section-y: 88px;
    --section-y-compact: 64px;
    --fs-display: 56px;
    --fs-h1: 46px;
    --fs-h2: 38px;
    --fs-stat: 84px;
    --header-h: 76px;
    --header-h-x: 150px;
    --logo-h: 50px;
    --logo-h-x: 96px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --margin: 20px;
    --gutter: 20px;
    --section-y: 64px;
    --section-y-compact: 48px;
    --header-h: 68px;
    --header-h-x: 116px;
    --logo-h: 44px;
    --logo-h-x: 72px;
    --stack: 20px;

    --fs-display: 42px;  --lh-display: 1.08;
    --fs-h1: 36px;       --lh-h1: 1.1;
    --fs-h2: 31px;       --lh-h2: 1.15;
    --fs-h3: 23px;       --lh-h3: 1.3;
    --fs-h4: 19px;
    --fs-statement: 27px;--lh-statement: 1.28;
    --fs-stat: clamp(34px, 11.5vw, 46px);   /* three stats side by side on phones */
    --fs-lead: 18px;
    --fs-body: 16px;     /* never below 16px on mobile */
    --fs-small: 16px;    /* small text meets the 16px floor on mobile too */
    --fs-caption: 13px;
  }
}

/* ==========================================================================
   3. Theme sets — semantic tokens read by every component
   ========================================================================== */

.theme-dark {
  --bg: var(--c-dk-1);
  --bg-image:
    radial-gradient(60% 55% at 100% 100%, var(--c-dk-glow) 0%, rgba(30, 53, 114, 0) 100%),
    linear-gradient(135deg, var(--c-dk-0) 0%, var(--c-dk-1) 100%);
  --fg-heading: var(--c-dk-heading);
  --fg-accent: var(--c-dk-heading-accent);  /* second tone of two-tone headlines */
  --fg-body: var(--c-dk-body);
  --fg-muted: var(--c-dk-muted);
  --link: var(--c-periwinkle);
  --link-hover: var(--c-dk-heading);
  --icon: var(--c-periwinkle);
  --rule: var(--c-divider);
  --surface: var(--c-dk-surface);
  --surface-hover: var(--c-dk-surface-hover);
  --surface-border: var(--c-dk-border);
  --pill-bg: var(--c-dk-pill);
  --pill-fg: var(--c-dk-body);
  --pill-outline: rgba(220, 228, 248, 0.5);
  --ramp-1: var(--c-royal);
  --ramp-2: var(--c-periwinkle);
  --ramp-3: var(--c-mist);
  --stat-1: var(--c-royal);
  --stat-2: var(--c-periwinkle);
  --stat-3: var(--c-mist);
  --btn-primary-bg: var(--c-royal-ink);
  --btn-primary-bg-hover: var(--c-royal-deep);
  --btn-primary-fg: var(--c-white);
  --btn-secondary-fg: var(--c-dk-heading);
  --btn-secondary-border: rgba(240, 244, 252, 0.55);
  --btn-secondary-bg-hover: rgba(255, 255, 255, 0.1);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: #8090BA;          /* 5.5:1 on the dark ground, 3.7:1 on the glow */
  --input-fg: var(--c-dk-heading);
  --focus: var(--c-sky);
  --callout-bg: var(--c-navy-deep);
  --callout-fg: var(--c-dk-body);
  --chart-text: var(--c-dk-muted);
  color-scheme: dark;
}

:root,            /* light values are the defaults, so anything outside a themed section (the header) still resolves */
.theme-light,
.theme-alt {
  --bg: var(--c-lt-bg);
  --bg-image: none;
  --fg-heading: var(--c-lt-heading);
  --fg-accent: var(--c-royal);
  --fg-body: var(--c-lt-body);
  --fg-muted: var(--c-lt-muted);
  --link: var(--c-royal-ink);
  --link-hover: var(--c-lt-heading);
  --icon: var(--c-royal);
  --rule: var(--c-divider);
  --surface: var(--c-lt-bg-alt);
  --surface-hover: var(--c-lt-surface-hover);
  --surface-border: var(--c-lt-border);
  --pill-bg: var(--c-lt-pill);
  --pill-fg: var(--c-lt-heading);
  --pill-outline: var(--c-lt-heading);
  --ramp-1: var(--c-royal);
  --ramp-2: var(--c-periwinkle);
  --ramp-3: var(--c-navy-deep);
  --stat-1: var(--c-royal);
  --stat-2: var(--c-navy-deep);
  --stat-3: var(--c-royal-ink);
  --btn-primary-bg: var(--c-royal-ink);
  --btn-primary-bg-hover: var(--c-royal-deep);
  --btn-primary-fg: var(--c-white);
  --btn-secondary-fg: var(--c-lt-heading);
  --btn-secondary-border: var(--c-lt-heading);
  --btn-secondary-bg-hover: var(--c-lt-surface-hover);
  --input-bg: var(--c-white);
  --input-border: #7E88A6;          /* 3.5:1 on white, 3.3:1 on off-white */
  --input-fg: var(--c-lt-heading);
  --focus: var(--c-sky-ink);
  --callout-bg: var(--c-navy-deep);
  --callout-fg: var(--c-dk-body);
  --chart-text: var(--c-lt-muted);
  color-scheme: light;
}

.theme-alt {
  --bg: var(--c-lt-bg-alt);
  --surface: var(--c-lt-bg);          /* cards go white on the off-white ground */
  --input-bg: var(--c-white);
}