/* ==========================================================================
   Design tokens — single source of truth for color, type, spacing, radius,
   shadow and motion. Every other stylesheet in this app should reference
   these custom properties rather than literal values.
   ========================================================================== */

:root {
    /* ---- Color: primary — KanouHealth Deep Blue (trust, healthcare, professionalism) ---- */
    --primary-50: #e3f2fd;
    --primary-100: #bbdefb;
    --primary-200: #90caf9;
    --primary-300: #64b5f6;
    --primary-400: #42a5f5;
    --primary-500: #2196f3;
    --primary-600: #1565c0;
    --primary-700: #0d47a1;
    --primary-800: #0a3878;
    --primary-900: #072752;

    /* ---- Color: secondary — KanouHealth Emerald Green (healthy living, growth) ---- */
    --secondary-50: #e8f5e9;
    --secondary-100: #c8e6c9;
    --secondary-200: #a5d6a7;
    --secondary-300: #81c784;
    --secondary-400: #66bb6a;
    --secondary-500: #4caf50;
    --secondary-600: #2e7d32;
    --secondary-700: #1b5e20;
    --secondary-800: #164a19;
    --secondary-900: #0f3411;

    /* ---- Color: neutral gray ---- */
    --gray-25: #f6f8fb;
    --gray-50: #f8fafc;
    --gray-100: #eef2f6;
    --gray-200: #dbe4ec;
    --gray-300: #c3cfdb;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #344256;
    --gray-800: #1f2937;
    --gray-900: #263238;

    /* ---- Color: semantic — brand hexes used for fills/icons/borders (AA-safe
       against white at 3:1, the WCAG bar for graphical objects and large text);
       the -700 step is a darker in-family shade reserved for small text-on-white,
       where the literal brand hex alone would fall short of the 4.5:1 text bar ---- */
    --success-50: #e8f5e9;
    --success-100: #c8e6c9;
    --success-600: #43a047;
    --success-700: #2e7d32;

    --warning-50: #fff3e0;
    --warning-100: #ffe0b2;
    --warning-600: #fb8c00;
    --warning-700: #b04a00;

    --danger-50: #ffebee;
    --danger-100: #ffcdd2;
    --danger-600: #e53935;
    --danger-700: #b71c1c;

    --accent-50: #e1f5fe;
    --accent-100: #b3e5fc;
    --accent-600: #29b6f6;
    --accent-700: #0277bd;

    /* ---- Semantic surface tokens (names kept stable from the previous
       token set so existing rules/usages keep working) ---- */
    --bg: var(--gray-25);
    --surface: #ffffff;
    --surface-soft: var(--primary-50);
    /* Fixed dark-navy surface for decorative panels (CTA banner, auth hero)
       that stay dark with white text in both themes — same literal-value
       exception as --surface, since --primary-900 inverts to pale in dark
       mode and would break the white text painted on top of it. */
    --surface-inverse: #072752;
    --text: var(--gray-900);
    --muted: var(--gray-600);
    --line: var(--gray-200);
    --primary: var(--primary-600);
    --primary-dark: var(--primary-700);
    --secondary: var(--secondary-600);
    --secondary-dark: var(--secondary-700);
    --accent: var(--accent-600);
    --danger: var(--danger-600);
    --warning: var(--warning-600);
    --success: var(--success-600);

    /* ---- Typography — KanouHealth: Poppins (headings), Inter (body) ---- */
    --font-heading: "Poppins", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;
    --text-4xl: 2.75rem;

    --fw-regular: 400;
    --fw-medium: 550;
    --fw-semibold: 650;
    --fw-bold: 750;
    --fw-black: 850;

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;
    --lh-loose: 1.75;

    /* ---- Spacing — 8pt grid (4px half-step for fine adjustments) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ---- Radius ---- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* ---- Shadow ---- */
    --shadow-xs: 0 1px 2px rgba(15, 35, 52, .06);
    --shadow-sm: 0 4px 12px rgba(15, 35, 52, .06);
    --shadow-md: 0 16px 45px rgba(15, 35, 52, .08);
    --shadow-lg: 0 24px 60px rgba(15, 35, 52, .14);
    --shadow-focus: 0 0 0 3px rgba(21, 101, 192, .16);
    --shadow: var(--shadow-md); /* back-compat alias, existing markup may still reference --shadow */

    /* ---- Motion — hover/focus/skeleton micro-interactions only, never page-level ---- */
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --duration-fast: 120ms;
    --duration-base: 160ms;
    --duration-slow: 240ms;
}

/* ==========================================================================
   Dark theme — overrides only the color tokens above (never spacing/type/
   motion). Everything semantic (--bg, --text, --muted, --line, --primary,
   --primary-dark, --secondary, --accent, --danger, --warning, --success,
   --surface-soft) is defined in :root as `var(--some-scale-NNN)`, so
   overriding just the numbered scales here is enough — those aliases
   re-resolve automatically. `--surface` is the one exception (a literal
   #ffffff, not an alias), so it's overridden directly.

   Each numbered scale keeps its light-theme DIRECTION reversed rather than
   just recoloring 1:1: low-numbered steps (-50/-100) are "a subtle fill
   close to the page background" in both themes (pale-on-white in light,
   dark-on-black here), and high-numbered steps (-600/-700/-900) are
   "readable ink" in both themes (dark text in light, light text here).
   Toggled via [data-theme="dark"] on <html>, set before first paint by the
   inline script in base.html <head> (checks localStorage, then
   prefers-color-scheme) — see static/js/app.js for the click handler. ---- */
:root[data-theme="dark"] {
    --primary-50: #0f1f33;
    --primary-100: #14304f;
    --primary-200: #1c4569;
    --primary-300: #2a5f8f;
    --primary-400: #3b7bb3;
    --primary-500: #4f97d2;
    --primary-600: #5da2e0;
    --primary-700: #8ec2ec;
    --primary-800: #b8dbf5;
    --primary-900: #e8f4fd;

    --secondary-50: #0f2012;
    --secondary-100: #15311a;
    --secondary-200: #1e4524;
    --secondary-300: #2b5e32;
    --secondary-400: #3c7a44;
    --secondary-500: #4f9557;
    --secondary-600: #63b56c;
    --secondary-700: #93cf98;
    --secondary-800: #bfe3c2;
    --secondary-900: #e9f7ea;

    --gray-25: #0a0f1a;
    --gray-50: #10182a;
    --gray-100: #172032;
    --gray-200: #2a3850;
    --gray-300: #3c4f6e;
    --gray-400: #8a97ab;
    --gray-500: #9fabbe;
    --gray-600: #b9c3d3;
    --gray-700: #cdd5e2;
    --gray-800: #e4e9f2;
    --gray-900: #f5f7fb;

    --success-50: #0f2012;
    --success-100: #15311a;
    --success-600: #5fce6c;
    --success-700: #92dd9a;

    --warning-50: #2c1c07;
    --warning-100: #40290a;
    --warning-600: #ffab40;
    --warning-700: #ffc576;

    --danger-50: #2c100e;
    --danger-100: #401614;
    --danger-600: #ff6f6a;
    --danger-700: #ff9c98;

    --accent-50: #0a2230;
    --accent-100: #0f3548;
    --accent-600: #4fc1ee;
    --accent-700: #8fd8f4;

    --surface: #131c30;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-md: 0 16px 45px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    --shadow-focus: 0 0 0 3px rgba(93, 162, 224, .35);
}

/* ---- Self-hosted brand fonts — Poppins (headings), Inter (body). Variable
   Inter file covers weights 400-700 via the wght axis; Poppins ships as static
   per-weight instances since Google doesn't serve it as a variable font. ---- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-variable-latin.260c81a4759b.woff2") format("woff2-variations"), url("../fonts/inter-variable-latin.260c81a4759b.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-500-latin.a09f2fccfee3.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-600-latin.72993dddf88a.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-700-latin.25b0e113ca7c.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-800-latin.af4d371a1027.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}