/* isdownus v2 — design tokens.
   Every color on the site is defined here. Components, the chart (chart.js) and the map (map.js)
   read these custom properties; nothing else hard-codes a color.

   Status colors are reserved for status: --ok (working), --warn (possible problems), --bad (problems).
   The brand accent is violet-blue, never green / amber / red, so a status color always means something. */

@layer reset, tokens, base, layout, components, utilities, page;

@layer tokens {
    :root {
        color-scheme: light;

        /* Surfaces and text. Flat look: white page, light-gray filled cards, no borders or shadows. */
        --bg: #FFFFFF;
        --surface: #F4F5F8;
        --surface-2: #FFFFFF;
        --surface-3: #E9EBF0;
        --ink: #15171F;
        --ink-2: #3A3E4C;
        --muted: #646979;
        --line: #E4E6EC;
        --line-strong: #D3D6DF;

        /* Brand (logo, links, primary button, focus) */
        --brand: #4F46E5;
        --brand-strong: #4338CA;
        --brand-tint: #EEEFFE;
        --on-brand: #FFFFFF;

        /* Status: text color, icon/fill color, tinted background, border */
        --ok: #15803D;
        --ok-fill: #22A355;
        --ok-tint: #EAF7EF;
        --ok-line: #BCE5CA;
        --warn: #A9520A;
        --warn-fill: #F59E0B;
        --warn-tint: #FEF5E4;
        --warn-line: #F4D49B;
        --bad: #C0261C;
        --bad-fill: #E5483D;
        --bad-tint: #FDEEEC;
        --bad-line: #F4C3BE;

        /* Chart (read by chart.js) */
        --chart-bar: #C5C8D3;
        --chart-bar-high: var(--warn-fill);
        --chart-bar-peak: var(--bad-fill);
        --chart-band: #E3E5EC;
        --chart-grid: #E6E8EE;
        --chart-axis: var(--muted);
        --chart-cursor: #9AA0B4;

        /* Map: no-data fill, region stroke, then a 5-step sequential scale (read by map.js) */
        --map-empty: #E3E5EC;
        --map-stroke: var(--surface);
        --map-1: #DEDCFB;
        --map-2: #BDB8F7;
        --map-3: #988FF1;
        --map-4: #7067EA;
        --map-5: #4A40D6;

        /* Service logos sit on a light tile in both themes (most logos are drawn for light backgrounds),
           initials on one of the avatar colors when a logo is missing */
        --logo-bg: #FFFFFF;
        --avatar-1: #4F46E5;
        --avatar-2: #7C3AED;
        --avatar-3: #2563EB;
        --avatar-4: #0E7490;
        --avatar-5: #475569;
        --avatar-6: #BE185D;
        --on-avatar: #FFFFFF;

        /* Ads, overlay, shadow */
        --ad-bg: #F4F5F8;
        --backdrop: rgb(20 23 38 / .45);
        --shadow-color: 228 30% 20%;
        --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .05);
        --shadow: 0 1px 2px hsl(var(--shadow-color) / .04), 0 6px 20px hsl(var(--shadow-color) / .06);
        --shadow-lg: 0 2px 4px hsl(var(--shadow-color) / .06), 0 24px 60px hsl(var(--shadow-color) / .18);

        /* Type */
        --font: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        --step--1: clamp(.8125rem, .79rem + .1vw, .875rem);
        --step-0: clamp(.9375rem, .91rem + .15vw, 1.0625rem);
        --step-1: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
        --step-2: clamp(1.25rem, 1.14rem + .55vw, 1.625rem);
        --step-3: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
        --step-4: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);

        /* Space */
        --space-1: .25rem;
        --space-2: .5rem;
        --space-3: .75rem;
        --space-4: 1rem;
        --space-5: clamp(1.125rem, 1rem + .6vw, 1.5rem);
        --space-6: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
        --space-7: clamp(2rem, 1.5rem + 2vw, 3.5rem);
        --gutter: clamp(1rem, .6rem + 2vw, 2rem);

        /* Shape and motion */
        --radius-sm: 8px;
        --radius: 12px;
        --radius-lg: 18px;
        --radius-pill: 999px;
        --container: 1160px;
        --sidebar: 268px;
        --header-h: 3.75rem;
        --tabs-h: 2.75rem;   /* sticky in-page tabs on the status page */
        --ease: cubic-bezier(.2, .7, .2, 1);
        --dur: .18s;
    }

    /* Dark theme. The inline script in layouts/base.php sets data-theme (saved choice, else the system's)
       before the first paint, so only this one block is needed. Keep --bg in sync with that script. */
    :root[data-theme="dark"] {
        color-scheme: dark;

        --bg: #0E1016;
        --surface: #171A23;
        --surface-2: #1C2029;
        --surface-3: #272C38;
        --ink: #EDEFF5;
        --ink-2: #C3C8D6;
        --muted: #8E94A7;
        --line: #252A36;
        --line-strong: #343A48;

        --brand: #8D87FF;
        --brand-strong: #ABA6FF;
        --brand-tint: #22214A;
        --on-brand: #0E1016;

        --ok: #4ADE80;
        --ok-fill: #22C55E;
        --ok-tint: #0F2619;
        --ok-line: #1D4A2E;
        --warn: #FBBF24;
        --warn-fill: #F59E0B;
        --warn-tint: #2B2210;
        --warn-line: #574215;
        --bad: #FB8A80;
        --bad-fill: #EF4C42;
        --bad-tint: #2F1518;
        --bad-line: #5C2328;

        --chart-bar: #3B4152;
        --chart-band: #222632;
        --chart-grid: #232834;
        --chart-cursor: #5C6378;

        --map-empty: #242935;
        --map-1: #2B2959;
        --map-2: #3C378F;
        --map-3: #564EC5;
        --map-4: #7B73EE;
        --map-5: #A6A0FF;

        --logo-bg: #E9EBF0;
        --ad-bg: #171A23;
        --backdrop: rgb(4 5 9 / .65);
        --shadow-color: 230 40% 2%;
        --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .4);
        --shadow: 0 1px 2px hsl(var(--shadow-color) / .3), 0 6px 20px hsl(var(--shadow-color) / .35);
        --shadow-lg: 0 2px 4px hsl(var(--shadow-color) / .3), 0 24px 60px hsl(var(--shadow-color) / .6);
    }
}