/*
 * ER Design System — Tokens
 * Single source of truth for color, type, spacing, radius, shadow, and motion
 * values. Components consume these custom properties; nothing below the
 * component layer should hard-code a color or a pixel value that exists here.
 * Palette source: ER_WEBSITE_MASTER_PLAN_v1.0.md section 6.
 */

:root {
    /* ---- Color: grounds ---- */
    --er-carbon-900: #080b0d;
    --er-carbon-800: #0d1114;
    --er-carbon-700: #111619;
    --er-graphite-600: #171d20;
    --er-graphite-500: #1d2427;
    --er-graphite-400: #232a2e;

    /* ---- Color: metal ---- */
    --er-gunmetal-600: #465159;
    --er-gunmetal-500: #556169;
    --er-gunmetal-400: #69757d;
    --er-metallic-300: #c8d0d5;
    --er-metallic-200: #dbe1e4;
    --er-metallic-100: #eef2f4;
    --er-white: #ffffff;

    /* ---- Color: brand emerald ---- */
    --er-emerald-700: #0e6b45;
    --er-emerald-600: #12794f;
    --er-emerald-500: #168755;
    --er-emerald-400: #23a568;
    --er-emerald-glow: rgba(22, 135, 85, 0.35);
    /* Brighter than the structural emerald scale above — reserved for the
     * hero headline glow and other high-intensity accents, matching the
     * live site's vivid signal green (visual_recovery_004r.md). The
     * emerald-5/6/700 scale stays the workhorse brand color; this is the
     * one place it gets to shout. */
    --er-signal-green: #3ee87f;
    --er-signal-green-glow: rgba(62, 232, 127, 0.55);

    /* ---- Color: semantic ---- */
    --er-warn: #c4842d;
    --er-risk: #b3453a;
    --er-info: #4a90c4;

    /* ---- Color: assigned roles (light-on-dark is the committed identity) ---- */
    --er-bg: var(--er-carbon-800);
    --er-bg-raised: var(--er-graphite-600);
    --er-bg-panel: var(--er-graphite-500);
    --er-border: rgba(200, 208, 213, 0.14);
    --er-border-strong: rgba(200, 208, 213, 0.28);
    --er-text: var(--er-metallic-100);
    --er-text-dim: var(--er-metallic-300);
    --er-text-faint: var(--er-gunmetal-400);
    --er-accent: var(--er-emerald-500);
    --er-accent-strong: var(--er-emerald-400);
    --er-accent-glow: var(--er-emerald-glow);

    /* ---- Type families ----
     * System-safe stacks only: no webfont licensing/perf risk, no novelty
     * sci-fi face. Display face leans on the wide, geometric system faces
     * that carry weight at large sizes; body face optimizes for long specs. */
    --er-font-display: "Segoe UI Semibold", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --er-font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --er-font-mono: "Cascadia Code", "Consolas", "SFMono-Regular", Menlo, monospace;

    /* ---- Type scale (major third, 1.25) ---- */
    --er-text-xs: 0.75rem;
    --er-text-sm: 0.875rem;
    --er-text-base: 1rem;
    --er-text-md: 1.25rem;
    --er-text-lg: 1.563rem;
    --er-text-xl: 1.953rem;
    --er-text-2xl: 2.441rem;
    --er-text-3xl: 3.052rem;
    --er-text-4xl: 3.815rem;
    --er-text-5xl: 4.768rem;

    /* ---- Spacing (4px base) ---- */
    --er-space-1: 0.25rem;
    --er-space-2: 0.5rem;
    --er-space-3: 0.75rem;
    --er-space-4: 1rem;
    --er-space-5: 1.5rem;
    --er-space-6: 2rem;
    --er-space-7: 3rem;
    --er-space-8: 4rem;
    --er-space-9: 6rem;
    --er-space-10: 8rem;

    /* ---- Radius ---- */
    --er-radius-sm: 4px;
    --er-radius-md: 8px;
    --er-radius-lg: 16px;
    --er-radius-full: 999px;

    /* ---- Shadow / elevation ---- */
    --er-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --er-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --er-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
    --er-shadow-glow: 0 0 40px var(--er-accent-glow);

    /* ---- Metallic surface gradients ---- */
    --er-gradient-panel: linear-gradient(155deg, var(--er-graphite-400) 0%, var(--er-graphite-600) 60%, var(--er-carbon-700) 100%);
    --er-gradient-metal-edge: linear-gradient(90deg, transparent, var(--er-metallic-300), transparent);
    --er-gradient-emerald-sweep: linear-gradient(115deg, transparent 20%, var(--er-emerald-glow) 45%, transparent 70%);

    /* ---- Motion ---- */
    --er-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --er-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --er-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --er-motion-fast: 160ms;
    --er-motion-base: 320ms;
    --er-motion-slow: 640ms;
    --er-motion-cinematic: 1200ms;

    /* ---- Breakpoints (referenced by JS via getComputedStyle; CSS uses literal @media) ---- */
    --er-bp-sm: 480px;
    --er-bp-md: 768px;
    --er-bp-lg: 1024px;
    --er-bp-xl: 1280px;
    --er-bp-2xl: 1536px;

    /* ---- Layout ---- */
    --er-max-width: 1440px;
    --er-gutter: clamp(1.25rem, 4vw, 3rem);
    /* Matches the live site's actual header height (measured ~99px) — the
     * logo is sized to nearly fill it, not sit small inside a slim bar. */
    --er-header-height: 100px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --er-motion-fast: 0ms;
        --er-motion-base: 0ms;
        --er-motion-slow: 0ms;
        --er-motion-cinematic: 0ms;
    }
}