/*
 * tokens.css — the design-token contract for the NPHIES Auto Poll console.
 *
 * Implements the agnostic tokens from "Design skills/Dashboard-DesignSkill.md" as CSS
 * custom properties. This file contains NOTHING but @font-face and :root — no component
 * rules, no element selectors. Components consume --ds-* / --space-* / --text-* and never
 * raw hex (a Critical Rule in the design doc).
 *
 * Light/dark: every colour VALUE is written exactly once, as a private --_x-l / --_x-d
 * pair. The public --ds-* token is only ever a *pointer* at one of them. That satisfies
 * the design doc's "never manually swap colors" rule while still allowing a
 * deployment-level override (UiSettings:Theme -> data-theme on <html>) for wall displays
 * whose OS theme is wrong for the room. Default is auto: no data-theme attribute at all,
 * pure prefers-color-scheme.
 *
 * Load order: bootstrap.min.css -> tokens.css -> theme.css -> app.css
 */

/* ---------------------------------------------------------------- fonts ---- */
/* Self-hosted: this service may run with no internet, so a webfont CDN is out.
   unicode-range matters here — Branch_Name_Ar is Arabic and Inter has no Arabic
   coverage, so the browser must never download Inter for an Arabic-only cell. Arabic
   falls through the stack to Segoe UI, which ships with Windows. */
@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/InterVariable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/InterVariable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304-0311, U+0313-0314, U+0330-0331, U+0400-045F,
                   U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
                   U+A720-A7FF;
}

:root {
    /* ============================================================ values ====
       Private pairs. Never referenced by components — only by the pointer blocks
       below. Suffix -l = light, -d = dark. */

    /* surfaces */
    --_bg-l: #F9FAFB;          --_bg-d: #030712;
    --_surface-l: #FFFFFF;     --_surface-d: #101828;
    --_surface-2-l: #F9FAFB;   --_surface-2-d: #1E2939;
    --_surface-3-l: #F3F4F6;   --_surface-3-d: #1E2939;

    /* borders */
    --_border-l: #E5E7EB;         --_border-d: #1F2937;
    --_border-medium-l: #E5E7EB;  --_border-medium-d: #374151;
    /* border-default-strong is #E5E7EB in the light palette — identical to the default,
       which makes the required input hover state a literal no-op. The Critical Rules
       demand hover/focus/disabled on every interactive element, so the rule wins. */
    --_border-hover-l: #D1D5DC;   --_border-hover-d: #4A5565;

    /* text */
    --_heading-l: #111827;      --_heading-d: #FFFFFF;
    --_body-l: #4B5563;         --_body-d: #9CA3AF;
    --_body-subtle-l: #6B7280;  --_body-subtle-d: #9CA3AF;

    /* brand */
    --_brand-l: #1447E6;         --_brand-d: #155DFC;
    --_brand-strong-l: #193CB8;  --_brand-strong-d: #1447E6;
    --_brand-soft-l: #DBEAFE;    --_brand-soft-d: #1C398E;
    --_brand-softer-l: #EEF6FF;  --_brand-softer-d: #162455;
    --_brand-border-l: #BEDBFF;  --_brand-border-d: #1C398E;
    --_fg-brand-l: #1447E6;         --_fg-brand-d: #51A2FF;
    --_fg-brand-strong-l: #193CB8;  --_fg-brand-strong-d: #8EC5FF;

    /* status — success */
    --_success-l: #007A55;         --_success-d: #009966;
    --_success-soft-l: #ECFDF5;    --_success-soft-d: #002C22;
    --_success-border-l: #A7F3D0;  --_success-border-d: #064E3B;
    --_success-strong-l: #065F46;  --_success-strong-d: #00A63E;
    --_fg-success-l: #065F46;      --_fg-success-d: #10B981;

    /* status — danger */
    --_danger-l: #C70036;         --_danger-d: #C70036;
    --_danger-soft-l: #FEF0F2;    --_danger-soft-d: #4D0218;
    --_danger-border-l: #FECDD3;  --_danger-border-d: #881337;
    --_danger-strong-l: #9F0712;  --_danger-strong-d: #E7000B;
    --_fg-danger-l: #881337;      --_fg-danger-d: #F87171;

    /* status — warning */
    --_warning-l: #F97316;         --_warning-d: #F97316;
    --_warning-soft-l: #FFF7ED;    --_warning-soft-d: #7C2D12;
    --_warning-border-l: #FED7AA;  --_warning-border-d: #7C2D12;
    --_warning-strong-l: #CA3500;  --_warning-strong-d: #FF6900;
    --_fg-warning-l: #7C2D12;      --_fg-warning-d: #FBBF24;

    /* neutral badge */
    --_neutral-soft-l: #FFFFFF;    --_neutral-soft-d: #101828;
    --_neutral-border-l: #E5E7EB;  --_neutral-border-d: #1F2937;

    /* utility */
    --_dark-l: #1E2939;         --_dark-d: #030712;
    --_dark-strong-l: #030712;  --_dark-strong-d: #000000;
    --_disabled-l: #F3F4F6;     --_disabled-d: #1E2939;
    --_fg-disabled-l: #9CA3AF;  --_fg-disabled-d: #6A7282;

    /* poll-type accents, from the 8-colour accent set. Used ONLY to identify the three
       poll types — never body copy, navigation, or a large surface background. */
    --_sky-soft-l: #F0F9FF;     --_sky-soft-d: #082F49;
    --_sky-fg-l: #0369A1;       --_sky-fg-d: #38BDF8;
    --_teal-soft-l: #F0FDFA;    --_teal-soft-d: #042F2E;
    --_teal-fg-l: #0F766E;      --_teal-fg-d: #2DD4BF;
    --_purple-soft-l: #FAF5FF;  --_purple-soft-d: #3B0764;
    --_purple-fg-l: #7E22CE;    --_purple-fg-d: #C084FC;

    /* button glint (buttons.md) */
    --_glint-hi-l: rgba(255, 255, 255, 0.25);  --_glint-hi-d: rgba(255, 255, 255, 0.12);
    --_glint-lo-l: rgba(0, 0, 0, 0.12);        --_glint-lo-d: rgba(0, 0, 0, 0.25);

    /* backdrop */
    --_backdrop-l: rgba(3, 7, 18, 0.5);  --_backdrop-d: rgba(0, 0, 0, 0.6);

    /* ============================================ public tokens (light) ====
       The single API surface for every component. */

    --ds-bg: var(--_bg-l);
    --ds-surface: var(--_surface-l);
    --ds-surface-2: var(--_surface-2-l);
    --ds-surface-3: var(--_surface-3-l);

    --ds-border: var(--_border-l);
    --ds-border-medium: var(--_border-medium-l);
    --ds-border-hover: var(--_border-hover-l);

    --ds-heading: var(--_heading-l);
    --ds-body: var(--_body-l);
    --ds-body-subtle: var(--_body-subtle-l);

    --ds-brand: var(--_brand-l);
    --ds-brand-strong: var(--_brand-strong-l);
    --ds-brand-soft: var(--_brand-soft-l);
    --ds-brand-softer: var(--_brand-softer-l);
    --ds-brand-border: var(--_brand-border-l);
    --ds-fg-brand: var(--_fg-brand-l);
    --ds-fg-brand-strong: var(--_fg-brand-strong-l);

    --ds-success: var(--_success-l);
    --ds-success-soft: var(--_success-soft-l);
    --ds-success-border: var(--_success-border-l);
    --ds-success-strong: var(--_success-strong-l);
    --ds-fg-success: var(--_fg-success-l);

    --ds-danger: var(--_danger-l);
    --ds-danger-soft: var(--_danger-soft-l);
    --ds-danger-border: var(--_danger-border-l);
    --ds-danger-strong: var(--_danger-strong-l);
    --ds-fg-danger: var(--_fg-danger-l);

    --ds-warning: var(--_warning-l);
    --ds-warning-soft: var(--_warning-soft-l);
    --ds-warning-border: var(--_warning-border-l);
    --ds-warning-strong: var(--_warning-strong-l);
    --ds-fg-warning: var(--_fg-warning-l);

    --ds-neutral-soft: var(--_neutral-soft-l);
    --ds-neutral-border: var(--_neutral-border-l);

    --ds-dark: var(--_dark-l);
    --ds-dark-strong: var(--_dark-strong-l);
    --ds-disabled: var(--_disabled-l);
    --ds-fg-disabled: var(--_fg-disabled-l);

    --ds-poll-priorauth-soft: var(--_sky-soft-l);
    --ds-poll-priorauth-fg: var(--_sky-fg-l);
    --ds-poll-claim-soft: var(--_teal-soft-l);
    --ds-poll-claim-fg: var(--_teal-fg-l);
    --ds-poll-communication-soft: var(--_purple-soft-l);
    --ds-poll-communication-fg: var(--_purple-fg-l);

    --color-1-400: var(--_glint-hi-l);
    --color-1-700: var(--_glint-lo-l);
    --ds-backdrop: var(--_backdrop-l);

    /* ========================================== scales (theme-agnostic) ==== */

    /* Radius — radius.md allows exactly these three. Nothing else. */
    --ds-radius: 8px;
    --ds-radius-sm: 4px;
    --ds-radius-full: 9999px;

    /* Shadows — all 7 from shadows.md. Never stack two; hover steps up exactly one. */
    --shadow-2xs: 0 1px 0 0 rgb(0 0 0 / 0.03);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Spacing — layout.md's 8px base. The 4px half-step exists because the component
       specs are not all 8-multiples (badges 6/2, sidebar 12, modal 20, radius-sm 4). */
    --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;

    /* Type — console scale. typography.md's hierarchy, weights and colours are kept
       exactly; its absolute sizes (h1 60 / h2 44) are marketing-page sizes, rejected
       here. cards.md already caps card headings at 20px regardless of heading level,
       which is the doc's own precedent for compressing in dense contexts. */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 30px;

    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.7;
    --tracking-caps: 0.4px;

    --font-sans: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Segoe UI Emoji", sans-serif;
    --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo,
                    Consolas, "Liberation Mono", monospace;

    /* Focus — buttons.md / inputs.md specify a 4px soft ring. */
    --ds-focus-width: 4px;
    --ds-focus-brand: color-mix(in srgb, var(--ds-brand) 24%, transparent);
    --ds-focus-neutral: color-mix(in srgb, var(--ds-body-subtle) 22%, transparent);

    /* Motion — named after the durations the design doc itself states. */
    --dur-icon: 75ms;
    --dur-color: 150ms;
    --dur-ui: 200ms;
    --dur-enter: 260ms;
    --dur-fade: 300ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);

    /* Layout + stacking */
    --sidebar-w: 256px;
    --topbar-h: 56px;
    --content-max: 1440px;
    --z-topbar: 20;
    --z-sidebar: 30;
    --z-backdrop: 40;   /* modals.md */
    --z-modal: 50;
}

/* ===================================== dark: system preference ==== */
/* Guarded with :not([data-theme="light"]) so an explicit light override wins. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ds-bg: var(--_bg-d);
        --ds-surface: var(--_surface-d);
        --ds-surface-2: var(--_surface-2-d);
        --ds-surface-3: var(--_surface-3-d);
        --ds-border: var(--_border-d);
        --ds-border-medium: var(--_border-medium-d);
        --ds-border-hover: var(--_border-hover-d);
        --ds-heading: var(--_heading-d);
        --ds-body: var(--_body-d);
        --ds-body-subtle: var(--_body-subtle-d);
        --ds-brand: var(--_brand-d);
        --ds-brand-strong: var(--_brand-strong-d);
        --ds-brand-soft: var(--_brand-soft-d);
        --ds-brand-softer: var(--_brand-softer-d);
        --ds-brand-border: var(--_brand-border-d);
        --ds-fg-brand: var(--_fg-brand-d);
        --ds-fg-brand-strong: var(--_fg-brand-strong-d);
        --ds-success: var(--_success-d);
        --ds-success-soft: var(--_success-soft-d);
        --ds-success-border: var(--_success-border-d);
        --ds-success-strong: var(--_success-strong-d);
        --ds-fg-success: var(--_fg-success-d);
        --ds-danger: var(--_danger-d);
        --ds-danger-soft: var(--_danger-soft-d);
        --ds-danger-border: var(--_danger-border-d);
        --ds-danger-strong: var(--_danger-strong-d);
        --ds-fg-danger: var(--_fg-danger-d);
        --ds-warning: var(--_warning-d);
        --ds-warning-soft: var(--_warning-soft-d);
        --ds-warning-border: var(--_warning-border-d);
        --ds-warning-strong: var(--_warning-strong-d);
        --ds-fg-warning: var(--_fg-warning-d);
        --ds-neutral-soft: var(--_neutral-soft-d);
        --ds-neutral-border: var(--_neutral-border-d);
        --ds-dark: var(--_dark-d);
        --ds-dark-strong: var(--_dark-strong-d);
        --ds-disabled: var(--_disabled-d);
        --ds-fg-disabled: var(--_fg-disabled-d);
        --ds-poll-priorauth-soft: var(--_sky-soft-d);
        --ds-poll-priorauth-fg: var(--_sky-fg-d);
        --ds-poll-claim-soft: var(--_teal-soft-d);
        --ds-poll-claim-fg: var(--_teal-fg-d);
        --ds-poll-communication-soft: var(--_purple-soft-d);
        --ds-poll-communication-fg: var(--_purple-fg-d);
        --color-1-400: var(--_glint-hi-d);
        --color-1-700: var(--_glint-lo-d);
        --ds-backdrop: var(--_backdrop-d);
    }
}

/* ===================================== dark: explicit override ==== */
:root[data-theme="dark"] {
    --ds-bg: var(--_bg-d);
    --ds-surface: var(--_surface-d);
    --ds-surface-2: var(--_surface-2-d);
    --ds-surface-3: var(--_surface-3-d);
    --ds-border: var(--_border-d);
    --ds-border-medium: var(--_border-medium-d);
    --ds-border-hover: var(--_border-hover-d);
    --ds-heading: var(--_heading-d);
    --ds-body: var(--_body-d);
    --ds-body-subtle: var(--_body-subtle-d);
    --ds-brand: var(--_brand-d);
    --ds-brand-strong: var(--_brand-strong-d);
    --ds-brand-soft: var(--_brand-soft-d);
    --ds-brand-softer: var(--_brand-softer-d);
    --ds-brand-border: var(--_brand-border-d);
    --ds-fg-brand: var(--_fg-brand-d);
    --ds-fg-brand-strong: var(--_fg-brand-strong-d);
    --ds-success: var(--_success-d);
    --ds-success-soft: var(--_success-soft-d);
    --ds-success-border: var(--_success-border-d);
    --ds-success-strong: var(--_success-strong-d);
    --ds-fg-success: var(--_fg-success-d);
    --ds-danger: var(--_danger-d);
    --ds-danger-soft: var(--_danger-soft-d);
    --ds-danger-border: var(--_danger-border-d);
    --ds-danger-strong: var(--_danger-strong-d);
    --ds-fg-danger: var(--_fg-danger-d);
    --ds-warning: var(--_warning-d);
    --ds-warning-soft: var(--_warning-soft-d);
    --ds-warning-border: var(--_warning-border-d);
    --ds-warning-strong: var(--_warning-strong-d);
    --ds-fg-warning: var(--_fg-warning-d);
    --ds-neutral-soft: var(--_neutral-soft-d);
    --ds-neutral-border: var(--_neutral-border-d);
    --ds-dark: var(--_dark-d);
    --ds-dark-strong: var(--_dark-strong-d);
    --ds-disabled: var(--_disabled-d);
    --ds-fg-disabled: var(--_fg-disabled-d);
    --ds-poll-priorauth-soft: var(--_sky-soft-d);
    --ds-poll-priorauth-fg: var(--_sky-fg-d);
    --ds-poll-claim-soft: var(--_teal-soft-d);
    --ds-poll-claim-fg: var(--_teal-fg-d);
    --ds-poll-communication-soft: var(--_purple-soft-d);
    --ds-poll-communication-fg: var(--_purple-fg-d);
    --color-1-400: var(--_glint-hi-d);
    --color-1-700: var(--_glint-lo-d);
    --ds-backdrop: var(--_backdrop-d);
}

/* An explicit light override needs no rule body: :root already points at the -l values,
   and the media query above is guarded against [data-theme="light"]. Noted here so the
   absence is obviously deliberate rather than an omission. */