/* ============================================================
   OCTOPUS THEME — the ONLY place for colors, fonts and type sizes.
   Palette v2 (approved by Ash, Oct 24 2026) + Geist type scale.
   Change a value here and every page updates.
   Light mode is the default; dark mode follows the visitor's Mac
   setting via prefers-color-scheme.
   Fonts are self-hosted (/fonts/, SIL OFL 1.1, see
   /fonts/OFL-Geist-LICENSE.txt). No Google Fonts call.
   ============================================================ */

/* === FONTS (self-hosted, variable weight 100–900) === */
@font-face {
    font-family: 'Geist';
    src: url('/assets/lead-v1/fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/assets/lead-v1/fonts/Geist-Italic-Variable.woff2') format('woff2');
    font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/assets/lead-v1/fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
    color-scheme: light dark;

    /* ---------- Palette v2: LIGHT ---------- */
    --color-primary: #0E7FAD;          /* main button */
    --color-primary-hover: #0B6A91;    /* slightly darker primary */
    --color-on-primary: #FFFFFF;       /* text on main button */
    --color-link: var(--color-primary-hover); /* link text: #0E7FAD is 4.3:1 on bg, the hover shade passes AA */
    --color-secondary: #0A8283;
    --color-accent: #37EBC2;           /* fills/highlights only; never white text on it */
    --color-bg: #F4FAFB;
    --color-surface: #FFFFFF;
    --color-border: #D6E6EC;
    --color-text: #0F172A;
    --color-muted: #556274;
    --color-success: #0B8457;
    --color-error: #D63B3B;

    /* Deep (always-dark) bands: hero, benefits, sign-up, footer, 404 */
    --color-deep: #0A1628;
    --color-on-deep: #EAF2F7;
    --color-on-deep-muted: #9FB3C8;
    --color-accent-on-deep: #37EBC2;   /* highlight text on deep bands */

    /* HubSpot's iframe form draws dark labels we can't restyle,
       so its card stays light in both modes. */
    --color-form-card: #FFFFFF;

    /* Placeholder/TODO highlight on staged legal pages */
    --color-note-bg: #FEF3C7;
    --color-note-text: #92400E;

    /* Derived (keep as mixes of the tokens above) */
    --color-nav-bg: color-mix(in srgb, var(--color-bg) 92%, transparent);
    --color-hairline: color-mix(in srgb, var(--color-text) 8%, transparent);
    --color-hairline-on-deep: color-mix(in srgb, var(--color-on-deep) 10%, transparent);
    --color-glass-on-deep: color-mix(in srgb, var(--color-on-deep) 6%, transparent);
    --color-glow: color-mix(in srgb, var(--color-primary) 30%, transparent);
    --color-accent-wash: color-mix(in srgb, var(--color-accent) 15%, transparent);
    --shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-text) 5%, transparent);
    --shadow-lg: 0 12px 40px color-mix(in srgb, var(--color-text) 9%, transparent);
    --overlay-deep-strong: color-mix(in srgb, var(--color-deep) 85%, transparent);
    --overlay-deep: color-mix(in srgb, var(--color-deep) 60%, transparent);
    --overlay-deep-soft: color-mix(in srgb, var(--color-deep) 35%, transparent);

    /* ---------- Type ---------- */
    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-hero: 56px;      --lh-hero: 1.05;    --fw-hero: 700;
    --fs-section: 36px;   --lh-section: 1.15; --fw-section: 650;
    --fs-card: 22px;      --lh-card: 1.3;     --fw-card: 600;
    --fs-body: 18px;      --lh-body: 1.6;     --fw-body: 400;
    --fs-lede: 20px;      /* sub-heads under hero/page titles */
    --fs-small: 14px;     --lh-small: 1.5;
    --fs-caption: 12px;
    --fs-button: 16px;    --fw-button: 600;
    --fs-logo: 20px;      --fw-logo: 700;
    --fs-brand: 28px;     /* wordmark above the hero headline */
    --fs-stat: 64px;      --fw-stat: 700;     /* big numbers on stat cards */
    --fs-page-title: 48px;
    --tracking-tight: -0.02em;

    /* ---------- Spacing: 4px grid ---------- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
    --space-9: 36px;  --space-10: 40px; --space-12: 48px; --space-14: 56px;
    --space-15: 60px; --space-16: 64px; --space-20: 80px; --space-25: 100px;
    --space-35: 140px;

    /* ---------- Shape ---------- */
    --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
    --container: 1140px;
}

/* ---------- Palette v2: DARK ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #37EBC2;
        --color-primary-hover: #5FF2D0;
        --color-on-primary: #0F172A;
        --color-link: var(--color-primary);
        --color-secondary: #5CCFF2;
        --color-accent: #2DD4BF;
        --color-bg: #0A1628;
        --color-surface: #12233A;
        --color-border: #23395A;
        --color-text: #EAF2F7;
        --color-muted: #9FB3C8;
        --color-success: #4ADE80;
        --color-error: #FB7185;

        --color-deep: #06101E;          /* a step below bg so bands still read */
        --color-note-bg: #3B2F0B;
        --color-note-text: #FCD34D;
        --color-hairline: var(--color-border);
        --shadow-sm: 0 1px 3px color-mix(in srgb, #000000 30%, transparent);
        --shadow-lg: 0 12px 40px color-mix(in srgb, #000000 45%, transparent);
    }
}

/* ---------- Mobile type ---------- */
@media (max-width: 768px) {
    :root {
        --fs-hero: 36px;
        --fs-section: 28px;
        --fs-stat: 48px;
        --fs-page-title: 32px;
    }
}