/*
 * Design tokens — single source of truth for color, spacing, type, radii.
 * Mirrors the principle of CSS custom properties driving the entire theme,
 * so the same palette can later be ported to the Flutter app's ThemeData.
 */
:root {
    /* Brand — mirrors lib/core/theme/tokens.dart Tokens.accent */
    --accent: #e2532f;
    /* --hc-accent (orange) */
    --accent-strong: #bc4223;
    /* --hc-accent-dark */
    --accent-soft: #fce2da;
    /* tinted-orange surface */
    --accent-gold: #d4af58;
    /* secondary, for borders/highlights */

    /* Ink and fills that carry text (visual review 10 Oct, V2). --accent
       stays the brand colour for the logo, rules and highlights, but white on
       it is 3.81:1, under the 4.5:1 normal text needs. White on --action-fill
       is 5.33:1 and on its hover 6.64:1. --link-ink is 4.80:1 on paper and
       5.33:1 on white; --warning-ink 5.18:1 on paper. Same in both themes for
       fills; inks have dark-theme values below. */
    --action-fill: #bc4223;
    --action-fill-hover: #a3391e;
    --text-on-action: #ffffff;
    --link-ink: #bc4223;
    --warning-ink: #8a5d0f;

    /* Surfaces — warm "editorial paper" dialect (see docs/VISUAL_STANDARDS.md
       §Two dialects): page = paper, bands = paper-alt, cards = white. */
    --bg: #f4f3f0;
    --bg-secondary: #ebe9e4;
    --bg-elevated: #ffffff;

    /* Dark band chrome (members/cross-sell/footer) — navy family shared
       with the app (Tokens.bgDark / bgDarkest). */
    --bg-dark: #0a0e14;
    --bg-darkest: #060a10;
    --hairline-on-dark: rgba(255, 255, 255, 0.10);
    --text-on-dark: #f7f6f3;
    --text-on-dark-muted: #b4bcd0;
    --text-on-dark-faint: #7a8599;

    /* Ink */
    --text: #12151c;
    --text-soft: #3d4a5c;
    /* Was #5c6b7d: 4.49:1 on --bg-secondary. #536173 is 5.21:1 there,
       5.69:1 on paper (visual review 10 Oct, V2). */
    --text-muted: #536173;
    --text-on-accent: #ffffff;

    /* Lines — warm hairlines on paper */
    --border: #dad7d0;
    --border-strong: #c9c5bb;

    /* Severity / priority scale — brand-native (harmonised with accent/gold,
       not the generic Tailwind defaults). Mirror of Tokens.p1..p5. */
    --p1: #b23a2e; /* clay/brick — error/danger */
    --p2: #c6891c; /* ochre — warning/pending */
    --p3: #3e6e8e; /* steel — info */
    --p4: #2e7d5b; /* forest — success/approved */
    --p5: #6c5b7b; /* plum — secondary */

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-card: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Type */
    --font-display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Fluid type scale — clamp(min, preferred, max).
       Preferred = vw-based so it grows on tablets/desktops without
       blowing up on 4K screens. Tuned around a 360–1440 viewport. */
    --fs-1: clamp(0.80rem, 0.74rem + 0.20vw, 0.875rem);
    /* 13–14 small */
    --fs-2: clamp(0.95rem, 0.88rem + 0.30vw, 1.0625rem);
    /* 15–17 body */
    --fs-3: clamp(1.05rem, 0.96rem + 0.45vw, 1.20rem);
    /* 17–19 lead */
    --fs-4: clamp(1.25rem, 1.05rem + 0.90vw, 1.625rem);
    /* 20–26 h3 */
    --fs-5: clamp(1.50rem, 1.20rem + 1.40vw, 2.125rem);
    /* 24–34 h2 */
    --fs-6: clamp(1.95rem, 1.40rem + 2.50vw, 3.25rem);
    /* 31–52 h1 */
    --fs-7: clamp(2.40rem, 1.50rem + 4.20vw, 4.50rem);
    /* 38–72 hero */

    /* Line heights paired with the type scale */
    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-body: 1.65;

    /* Elevation — one soft ambient shadow max (editorial); depth otherwise
       comes from hairline borders. */
    --shadow-sm: 0 1px 2px rgba(18, 21, 28, 0.04);
    --shadow-md: 0 4px 28px rgba(18, 21, 28, 0.07);
    --shadow-lg: 0 16px 48px -12px rgba(18, 21, 28, 0.16);
    --shadow-xl: 0 30px 80px -20px rgba(18, 21, 28, 0.28);

    /* Band rhythm (full-width editorial sections) */
    --band-y: clamp(2.75rem, 7vw, 5.25rem);
    --band-y-tight: clamp(2rem, 5vw, 3.5rem);

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1.05);
    --ease-spring: cubic-bezier(0.2, 0.9, 0.25, 1.15);
    --dur-fast: 0.18s;
    --dur-base: 0.28s;
    --dur-slow: 0.5s;

    /* Layout */
    --container-max: 1200px;
}

@media (prefers-color-scheme: dark) {
    /* Reserved — not switching theme automatically in POC, but tokens are ready. */
}

/* ===== Dark theme (mirrors Flutter app — Slate 900/800/700) ============ */
:root[data-theme="dark"] {
    --bg: #0f172a;
    --bg-secondary: #1e293b;
    --bg-elevated: #1e293b;
    --text: #f1f5f9;
    --text-soft: #e2e8f0;
    --text-muted: #cbd5e1;
    --text-on-accent: #ffffff;
    --border: #334155;
    --border-strong: #475569;
    --accent-soft: rgba(226, 83, 47, 0.18);
    /* 6.21:1 on --bg, 5.09:1 on --bg-elevated; warning 8.37:1 on --bg. */
    --link-ink: #f0744b;
    --warning-ink: #e0a841;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
}