/*
 * Design tokens: the single source for colours, type, spacing, radius, shadows and layout sizes.
 * Loaded first (file name sorts before the others). Components in 01-components.css use only these variables;
 * new CSS should too, instead of hard-coded values. Chart colours live in src/utils/color_utils.py and
 * src/utils/theme.py (they are checked by tests/test_logic.py).
 *
 * Light and dark: the page carries data-theme="light" or "dark" on <html>, resolved from the visitor's
 * Appearance choice (Auto follows the system) by the script in the page head and assets/theme.js. The dark block
 * below redefines the colour tokens only; tests/test_logic.py checks that it covers every colour token and that
 * text pairs keep their contrast. Use the semantic tokens (--color-fill-accent, --color-selected, --color-on-accent,
 * --color-surface-2, --color-fill-quiet) for fills, never a brand blue with white text, so both themes work.
 */
:root {
    /* Brand: World Bank navy and blues, neutral greys */
    --color-navy-900: #002244;
    --color-blue-700: #00538e;
    --color-blue-600: #0071bc;      /* primary action, links (5.3:1 on white) */
    --color-blue-500: #009fda;      /* World Bank accent blue: rules, bars and large shapes, never small text */
    --color-accent:   #009fda;
    --color-blue-100: #e5f2fa;
    --color-blue-50:  #f2f8fc;

    --color-ink-900: #111827;       /* headings */
    --color-ink-700: #374151;       /* body text */
    --color-ink-500: #5b6472;       /* secondary text (5.9:1 on white) */
    --color-line:    #e3e7ee;       /* borders, dividers */
    --color-grid:    #e5e7eb;       /* chart grid, same as GRID_COLOR in theme.py */
    --color-surface: #ffffff;       /* cards */
    --color-surface-2: #f7fafc;     /* bands inside a card: source footer, table header and total rows */
    --color-surface-raised: #ffffff; /* solid menus and lists that open over another material */
    --color-canvas:  #eef3f8;       /* page background */

    /* Fills that carry text, so each theme can pick a fill that keeps white text readable */
    --color-fill-accent: #0071bc;        /* primary buttons, slider track, checked boxes, pressed menu item */
    --color-fill-accent-hover: #00538e;
    --color-selected: #002244;           /* the active sidebar item */
    --color-on-accent: #ffffff;          /* text on the two fills above */
    --color-fill-quiet: rgba(118, 128, 148, 0.12);         /* segmented track, secondary buttons */
    --color-fill-quiet-strong: rgba(118, 128, 148, 0.24);  /* their hover and pressed state */
    --color-thumb: #ffffff;              /* segmented-control thumb */
    --color-paper: #ffffff;              /* sheet under pre-drawn images (maps), white in both themes */

    /* Status, always shown with an icon or a word as well */
    --color-good:    #17794c;
    --color-warning: #8a5a00;
    --color-warning-bg: #fff6df;
    --color-critical: #b42318;

    /* Typography */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --leading-display: 1.12;        /* leading shrinks as size grows */
    --leading-tight: 1.25;
    --leading-normal: 1.55;
    /* Tracking is size-specific (Inter's dynamic metrics): large text tighter, small text slightly looser */
    --tracking-display: -0.021em;   /* 28 px and up */
    --tracking-title: -0.016em;     /* 18-22 px */
    --tracking-body: -0.006em;      /* 13-15 px */
    --tracking-caption: 0.004em;    /* 11-12 px */
    --tracking-caps: 0.06em;        /* small upper-case labels */

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

    /* Shape and depth */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --shadow-1: 0 0 0 0.5px rgba(16, 24, 40, 0.04), 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.04);
    --shadow-2: 0 0 0 0.5px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.10), 0 16px 40px rgba(16, 24, 40, 0.10);
    --shadow-3: 0 0 0 0.5px rgba(16, 24, 40, 0.08), 0 12px 32px rgba(16, 24, 40, 0.16), 0 32px 80px rgba(16, 24, 40, 0.18);
    --focus-ring: 0 0 0 3px rgba(0, 113, 188, 0.35);

    /* Materials: translucent layers that content scrolls under. Thicker (more opaque, more blur) for
       bigger surfaces; never stack one light material on another. */
    --material-bar: rgba(255, 255, 255, 0.72);         /* header, pinned sidebar context */
    --material-sidebar: rgba(248, 251, 254, 0.86);
    --material-menu: rgba(255, 255, 255, 0.80);        /* menus, popovers */
    --material-blur-thin: blur(16px) saturate(180%);
    --material-blur-thick: blur(28px) saturate(190%);
    --material-context: rgba(236, 245, 251, 0.80);     /* country selector pinned over the scrolling menu */
    --material-drawer: rgba(250, 252, 254, 0.96);      /* phone navigation drawer */
    --material-edge: rgba(255, 255, 255, 0.55);        /* bright top edge: light catching the material */
    --hairline: rgba(16, 24, 40, 0.10);
    --scrim: rgba(0, 18, 38, 0.32);                    /* dims the page behind a modal task */
    --grabber: rgba(60, 60, 67, 0.30);                 /* handle on bottom sheets */

    /* Motion: springs, described with Apple's damping ratio and response.
       --ease-spring is a critically damped spring (damping 1.0, response 0.35 s) sampled into linear();
       it needs --dur-spring to settle. Gesture-driven motion (the phone drawer) runs a real spring in
       assets/shell.js instead, so it can be grabbed mid-flight and inherit the finger's velocity. */
    --ease-spring: cubic-bezier(0.2, 0.9, 0.25, 1);
    --dur-spring: 0.5s;
    --ease-out: cubic-bezier(0.25, 0.8, 0.3, 1);
    --dur-press: 80ms;          /* feedback on pointer-down: immediate */
    --dur-fast: 140ms;          /* colour and background changes */
    --press-scale: 0.97;

    /* Layout */
    --header-height: 72px;
    --sidebar-width: 280px;
    --content-max: 78rem;
    --breakpoint-phone: 768px;
    color-scheme: light;
}

/* Dark appearance. Surfaces get lighter as they come forward (canvas, card, band, menu); text, links and status
   colours are lifted so they keep at least 4.5:1 on the card. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-navy-900: #e8f0fa;      /* strong brand text (headings, values) */
    --color-blue-700: #8cc4f2;      /* small labels */
    --color-blue-600: #5cb0f0;      /* links and accents as text */
    --color-blue-500: #3ab8ec;
    --color-accent:   #3ab8ec;
    --color-blue-100: rgba(92, 176, 240, 0.20);
    --color-blue-50:  rgba(92, 176, 240, 0.11);

    --color-ink-900: #f2f5fa;
    --color-ink-700: #cdd5e1;
    --color-ink-500: #95a1b3;
    --color-line:    #2a3446;
    --color-grid:    rgba(255, 255, 255, 0.09);
    --color-surface: #161d2a;
    --color-surface-2: #1b2332;
    --color-surface-raised: #222b3c;
    --color-canvas:  #0c111b;

    --color-fill-accent: #1f72be;
    --color-fill-accent-hover: #1866ad;
    --color-selected: #1f72be;
    --color-on-accent: #ffffff;
    --color-fill-quiet: rgba(148, 160, 184, 0.16);
    --color-fill-quiet-strong: rgba(148, 160, 184, 0.28);
    --color-thumb: #3a4559;
    --color-paper: #ffffff;

    --color-good:    #4cc38a;
    --color-warning: #f0c060;
    --color-warning-bg: rgba(240, 192, 96, 0.14);
    --color-critical: #ff8a80;

    --shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 0 0 0.5px rgba(255, 255, 255, 0.10), 0 12px 32px rgba(0, 0, 0, 0.55), 0 32px 80px rgba(0, 0, 0, 0.45);
    --focus-ring: 0 0 0 3px rgba(92, 176, 240, 0.50);

    --material-bar: rgba(16, 22, 34, 0.72);
    --material-sidebar: rgba(18, 25, 38, 0.86);
    --material-menu: rgba(34, 43, 60, 0.82);
    --material-context: rgba(26, 35, 52, 0.80);
    --material-drawer: rgba(20, 27, 40, 0.96);
    --material-edge: rgba(255, 255, 255, 0.08);
    --hairline: rgba(255, 255, 255, 0.10);
    --scrim: rgba(0, 0, 0, 0.50);
    --grabber: rgba(235, 235, 245, 0.30);
}

/* Switching appearance eases colours over a moment instead of flashing (class set briefly by assets/theme.js) */
:root.theme-changing, :root.theme-changing *, :root.theme-changing *::before {
    transition: background-color 0.3s linear, color 0.3s linear, border-color 0.3s linear, fill 0.3s linear,
        box-shadow 0.3s linear !important;
}

@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --ease-spring: linear(0, 0.033, 0.109, 0.206, 0.309, 0.409, 0.501, 0.584, 0.656, 0.718, 0.77, 0.813, 0.849,
            0.879, 0.903, 0.922, 0.938, 0.951, 0.961, 0.969, 0.976, 0.981, 0.985, 0.988, 0.991, 0.993, 0.994, 0.996,
            0.997, 0.997, 0.998, 0.998, 1);
    }
}

/* Accessibility settings change the tokens, so every component follows */
@media (prefers-reduced-motion: reduce) {
    :root { --press-scale: 1; --dur-spring: 0.18s; --ease-spring: ease; }
}
@media (prefers-reduced-motion: reduce) {
    :root.theme-changing, :root.theme-changing *, :root.theme-changing *::before { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    :root {
        --material-bar: #ffffff; --material-sidebar: #f8fbfe; --material-menu: #ffffff;
        --material-context: #ecf5fb; --material-drawer: #fafcfe;
        --material-blur-thin: none; --material-blur-thick: none;
    }
    :root[data-theme="dark"] {
        --material-bar: #101622; --material-sidebar: #121926; --material-menu: #222b3c;
        --material-context: #1a2334; --material-drawer: #141b28;
    }
}
@media (prefers-contrast: more) {
    :root {
        --material-bar: #ffffff; --material-sidebar: #ffffff; --material-menu: #ffffff;
        --material-context: #ffffff; --material-drawer: #ffffff;
        --material-blur-thin: none; --material-blur-thick: none;
        --hairline: #5b6472; --color-line: #8a94a3; --color-ink-500: #374151;
    }
    :root[data-theme="dark"] {
        --material-bar: #0c111b; --material-sidebar: #0c111b; --material-menu: #161d2a;
        --material-context: #0c111b; --material-drawer: #0c111b;
        --hairline: #95a1b3; --color-line: #6b778a; --color-ink-500: #cdd5e1;
    }
}