/**
 * Global design tokens — fonts, colors, space, radius.
 * Keep in sync with helpers/theme.php defaults.
 * theme_inline_css() may override brand vars at runtime.
 */

:root {
    /* ---- Fonts ---- */
    --brand-font-display: 'Clash Display', 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --brand-font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--brand-font-display);
    --font-main: var(--brand-font-body);

    /* ---- Brand accent (teal) ---- */
    --brand-accent: #0d9488;
    --brand-accent-hover: #0f766e;
    --brand-accent-bright: #2dd4bf;
    --brand-accent-soft: rgba(45, 212, 191, 0.12);
    --brand-accent-glow: rgba(45, 212, 191, 0.35);
    --brand-accent-border: rgba(45, 212, 191, 0.35);

    /* Legacy ds-* aliases used across the site */
    --ds-teal-300: #5eead4;
    --ds-teal-400: var(--brand-accent-bright);
    --ds-teal-500: #14b8a6;
    --ds-teal-600: var(--brand-accent);
    --ds-teal-glow: var(--brand-accent-glow);
    --ds-teal-soft: var(--brand-accent-soft);
    --ds-teal-border: var(--brand-accent-border);

    /* ---- Neutrals / brand surfaces ---- */
    --brand-ink: #0f172a;
    --brand-ink-soft: #334155;
    --brand-muted: #64748b;
    --brand-faint: #94a3b8;
    --brand-surface: #ffffff;
    --brand-page-light: #f4f6fb;
    --brand-page-dark: #070b16;
    --brand-navy: #0c1222;
    --brand-navy-800: #121a2e;

    --ds-navy-950: #070b16;
    --ds-navy-900: #0c1222;
    --ds-navy-800: #121a2e;
    --ds-text-strong: #ffffff;
    --ds-text-primary: #f1f5f9;
    --ds-text-muted: #94a3b8;
    --ds-text-faint: #64748b;

    /* ---- Type scale ---- */
    --fs-hero: clamp(2.6rem, 5.4vw + 1rem, 5.2rem);
    --fs-h1: clamp(2.1rem, 3.2vw + 1rem, 3.2rem);
    --fs-h2: clamp(1.6rem, 1.6vw + 1rem, 2.1rem);
    --fs-h3: clamp(1.2rem, 0.6vw + 1rem, 1.5rem);
    --fs-body: clamp(1rem, 0.2vw + 0.95rem, 1.1rem);
    --fs-small: clamp(0.82rem, 0.1vw + 0.8rem, 0.92rem);
    --fs-label: clamp(0.7rem, 0.15vw + 0.68rem, 0.78rem);
    --fs-display: clamp(2rem, 4vw + 0.75rem, 3.25rem);
    --tracking-tight: -0.02em;
    --tracking-wide: 0.14em;

    /* ---- Space (4px base) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-section: clamp(2.5rem, 4vw + 1.5rem, 5rem);
    --space-section-tight: clamp(0.7rem, 1.2vw, 1rem);

    /* ---- Radius ---- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-2xl: 32px;
    --radius-pill: 9999px;

    /* ---- Motion ---- */
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
    --dur-fast: 0.18s;
    --dur-med: 0.28s;
    --dur-slow: 0.6s;

    /* ---- Shadows ---- */
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.1);
    --shadow-accent: 0 8px 20px rgba(13, 148, 136, 0.28);
    --shadow-glass-sm: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-glass-md: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);

    /* ---- Semantic page (dark default) ---- */
    --page-bg: var(--brand-page-dark);
    --page-bg-soft: var(--brand-navy);
    --page-surface: rgba(18, 26, 46, 0.42);
    --page-surface-strong: rgba(18, 26, 46, 0.62);
    --page-border: rgba(255, 255, 255, 0.12);
    --page-text: #f8fafc;
    --page-muted: var(--brand-faint);
    --page-faint: var(--brand-muted);
    --page-nav: rgba(7, 11, 22, 0.55);
    --page-glow-a: rgba(45, 212, 191, 0.14);
    --page-glow-b: rgba(59, 130, 246, 0.16);
    --page-glass-blur: blur(22px) saturate(1.35);
    --page-glass-shadow:
        0 10px 36px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="light"] {
    --page-bg: #eef2f8;
    --page-bg-soft: #f7f9fc;
    --page-surface: rgba(255, 255, 255, 0.48);
    --page-surface-strong: rgba(255, 255, 255, 0.68);
    --page-border: rgba(255, 255, 255, 0.72);
    --page-text: var(--brand-ink);
    --page-muted: var(--brand-muted);
    --page-faint: var(--brand-faint);
    --page-nav: rgba(255, 255, 255, 0.55);
    --page-glow-a: rgba(13, 148, 136, 0.1);
    --page-glow-b: rgba(59, 130, 246, 0.1);
    --page-glass-blur: blur(20px) saturate(1.4);
    --page-glass-shadow:
        0 12px 40px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] {
    --page-bg: var(--brand-page-dark);
    --page-bg-soft: var(--brand-navy);
    --page-surface: rgba(18, 26, 46, 0.42);
    --page-surface-strong: rgba(18, 26, 46, 0.62);
    --page-border: rgba(255, 255, 255, 0.12);
    --page-text: #f8fafc;
    --page-muted: var(--brand-faint);
    --page-faint: var(--brand-muted);
    --page-nav: rgba(7, 11, 22, 0.55);
    --page-glow-a: rgba(45, 212, 191, 0.14);
    --page-glow-b: rgba(59, 130, 246, 0.16);
    --page-glass-blur: blur(22px) saturate(1.35);
    --page-glass-shadow:
        0 10px 36px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}