/*
 * ADVx design tokens — fonts, theme switching, and the semantic tier that
 * all advx base/component/page CSS consumes. Color *values* live in
 * scales.css; this file gives them roles.
 *
 * Theme model: every color token resolves via light-dark(), driven purely by
 * color-scheme below. The html[data-theme] attribute contract (server-set,
 * toggled by theme_controller.js, watched by the map/chart controllers) is
 * unchanged — no attribute means "follow the OS".
 */

/* ── Self-hosted fonts (latin subsets) ─────────────────────────────────── */
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/barlow-400-4ad4debe.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/barlow-500-1f5bcbda.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/barlow-600-07ba6ae4.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/barlow-700-a47e5b9b.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/barlow-condensed-500-de15ee36.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/barlow-condensed-600-53e6a671.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/barlow-condensed-700-909728d4.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/assets/barlow-condensed-800-f916c04b.woff2") format("woff2");
}

@layer tokens {
    /* ── Theme switching ── */
    :root {
        color-scheme: light dark;
    }
    /* Not :root-scoped: a few views force a theme on a subtree (e.g. the
       login hero), and light-dark() resolves against the nearest
       color-scheme, so this keeps that working. */
    [data-theme="light"] {
        color-scheme: light;
    }
    [data-theme="dark"] {
        color-scheme: dark;
    }

    :root {
        /* ── Typography ── */
        --advx-font-body: "Barlow", system-ui, -apple-system, "Segoe UI",
            Roboto, sans-serif;
        --advx-font-heading: "Barlow Condensed", var(--advx-font-body);
        --advx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
            Consolas, monospace;
        --advx-text-1: 0.75rem; /* fine print, eyebrows */
        --advx-text-2: 0.875rem; /* secondary text, small */
        --advx-text-3: 1rem; /* body */
        --advx-text-4: 1.125rem;
        --advx-text-5: 1.375rem;
        --advx-text-6: 1.75rem;
        --advx-text-7: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* h1/display */
        /* Uppercase condensed headings are the brand voice — reverted from the
           refresh's sentence-case after review (titles read as a different
           font family at display sizes and clashed with the uppercase
           eyebrows/sidebar). */
        --advx-heading-transform: uppercase;
        --advx-eyebrow-transform: uppercase; /* stat labels, badges, overlines */
        --advx-eyebrow-tracking: 0.06em;

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

        /* ── Radius / borders ── */
        --advx-radius-1: 0.25rem;
        --advx-radius-2: 0.375rem; /* buttons, inputs */
        --advx-radius-3: 0.5rem; /* cards, dialogs */
        --advx-radius-full: 9999px;
        --advx-border-width: 1px;

        /* ── Surfaces & text ── */
        --advx-bg: var(--gray-1);
        --advx-surface: var(--gray-2);
        --advx-surface-2: var(--gray-3);
        --advx-text: var(--gray-12);
        --advx-text-muted: var(--gray-11);
        --advx-border: var(--gray-6);
        --advx-border-strong: var(--gray-7);

        /* ── Accent ── */
        --advx-accent: var(--amber-9);
        --advx-accent-hover: var(--amber-10);
        --advx-accent-contrast: #000; /* text on solid amber, both themes */
        --advx-accent-text: var(--amber-11);
        --advx-accent-text-hover: light-dark(#694d00, #e8ae01);
        --advx-focus-ring: var(--amber-8);

        /* ── Form fields ── */
        --advx-field-bg: light-dark(#ffffff, #292929);
        --advx-field-border: var(--gray-7);
        --advx-field-placeholder: var(--gray-10);
        --advx-field-text: light-dark(var(--gray-12), #e4e4e4);

        /* ── States ── */
        --advx-danger: light-dark(#ce2c31, #ff9592); /* red-11 */
        --advx-danger-solid: #e5484d; /* red-9, both themes */
        --advx-danger-border: light-dark(#eb8e90, #b54548); /* red-8 */
        --advx-valid: light-dark(#2a7e3b, #71d083); /* grass-11 */
        --advx-valid-border: light-dark(#65ba74, #3e7949); /* grass-8 */
        --advx-text-small: 0.875em;

        /* ── Elevation (alpha shadows read in both themes) ── */
        --advx-shadow-color: light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.4));
        --advx-shadow-color-strong: light-dark(
            rgba(0, 0, 0, 0.14),
            rgba(0, 0, 0, 0.55)
        );
        --advx-shadow-1: 0 1px 2px var(--advx-shadow-color);
        --advx-shadow-2: 0 2px 4px -1px var(--advx-shadow-color),
            0 4px 10px -2px var(--advx-shadow-color);
        --advx-shadow-3: 0 4px 8px -2px var(--advx-shadow-color),
            0 12px 28px -4px var(--advx-shadow-color-strong);

        --advx-transition: 0.2s ease-in-out;
    }

}