/**
 * tokens.css — THE DESIGN TOKENS, and nothing else.
 *
 * ⭐ Split out of theme.css on 2026-09-14 (task 196). The documents area in the admin console now
 * mounts the list module, and the list is drawn with these tokens — but theme.css also carries
 * the site's global rules (`body`, `.btn`, the reset), which on a page with its own buttons would
 * restyle every one of them. Tokens are a vocabulary; rules are a look. A page can borrow the
 * first without taking the second. [[structure_not_patches]]
 * ⚠ Every page that loads theme.css loads THIS FIRST — the rules read these names.
 */

/**
 * HexMed — Design System (ported from SPA_website/shared/styles/theme.css)
 * Clean, minimal. Orange accent. Self-hosted site.
 *
 * ⭐ TWO PALETTES, ONE FILE (task 175, Marius 2026-09-09):
 *   *"Can you create a toggle. like next to the flag for language. Make it a normal colored themed
 *   page. And dark mode should be how it is now."*
 *
 * ⛔⛔ `:root` IS THE **LIGHT** PALETTE, AND THAT IS HIS EXPLICIT CHOICE, NOT A DEFAULT I PICKED.
 * He was asked what a brand-new visitor with no stored preference should see, was recommended DARK
 * (so nothing changed for anyone), and answered **LIGHT**. Light is the face of the site; dark is
 * opted into and remembered. Do not "restore" dark here on the assumption it was an oversight.
 *
 * ⛔ THE DARK BLOCK BELOW IS TODAY'S SITE, VALUE FOR VALUE. *"dark mode should be how it is now"* —
 * every number in it was copied from the palette that shipped, not re-derived. If a dark value ever
 * needs to change, that is a separate decision with its own reason.
 *
 * ⚠ ADDING A COLOUR? It goes in BOTH blocks or it is wrong in one theme. A literal in a page file is
 * how the site ends up half-dark — 131 of them existed when this was written, and ~45 were greys
 * that simply stayed dark whatever the toggle said.
 * ⚠ NOT THEMEABLE, DELIBERATELY: national flag colours. A flag is not a design token.
 */

:root {
    /* ===== BACKGROUNDS — soft off-white, his pick ===== */
    --bg-darkest: #f7f7f5;   /* page canvas   (darkest = furthest back, not literally darkest) */
    --bg-dark: #f0efec;      /* inputs, wells */
    --bg-medium: #ffffff;    /* cards, panels, modals */
    --bg-light: #eceae6;     /* hover on cards */
    --bg-hover: #e4e2dd;     /* interactive hover */

    /* ===== BORDERS ===== */
    --border-default: #d8d6d1;
    --border-subtle: #eceae6;
    --border-focus: #a8a49c;

    /* ===== TEXT ===== */
    --text-primary: #1f1f1f;
    --text-secondary: #4a4a4a;
    --text-muted: #7a7a7a;
    /* ⛔⛔ THIS WAS #ffffff IN BOTH THEMES AND IT PUT WHITE TEXT ON A WHITE PAGE — Marius, 2026-09-10:
     * *"the welcome text, is in white: so white on white"*, and the same for the bias titles, the
     * landing cards and the login heading. Four separate reports, one token.
     * ▶ "inverse" means INVERTED RELATIVE TO THE PAGE, so on a light page it is near-black. It is
     * the heading/emphasis colour and every single `var(--text-inverse)` in the site is a heading —
     * text sitting ON an orange surface uses a literal `white`, which is correct and untouched. */
    --text-inverse: #14161a;

    /* ═══ THE BRAND — ⛔⛔ IDENTICAL IN BOTH THEMES. NEVER THEME THE LOGO. ═══
     * Marius, 2026-09-10: *"You should not change the color of the logo."*
     * ⛔ IT WAS CHANGED, BY ME, AND HE SPOTTED IT. The logo drew its colour from
     * `--accent-primary-text`, which I darkened so accent TEXT would be readable on white — so the
     * mark went with it. He asked whether it had changed or was *"maybe some transparency"*: it was
     * neither subtle nor an artefact, it was a different colour.
     * ▶ A LOGO IS NOT AN ACCENT. It is identity, it is fixed, and it now has its own token that
     * both themes define the same way — so darkening accent text can never drag it along again. */
    --brand-accent: #ff8c42;
    --brand-grad: linear-gradient(135deg, #d97230 0%, #ff8c42 100%);

    /* ⚠ SMALL ORANGE TEXT — the SOAP section headers (S/O/A/P) and the expander badge, both 10–11px.
     * They rendered as `--accent-primary` #d97230, which is 3.9:1 on white: legible, but under the
     * 4.5:1 small-text standard for the screen a clinician reads during a consultation. Dark keeps
     * #d97230 EXACTLY; only light darkens. */
    --accent-heading: #a34d13;

    /* ===== PRIMARY ACCENT - ORANGE (his, unchanged across both themes) ===== */
    /* ⚠ The BRIGHT/hover pair is darkened for light mode: #ff8c42 on white is 2.1:1 and unreadable
     * as LINK TEXT. That is the only reason these differ — and it is exactly why the brand above is
     * a separate token rather than a reuse of this one. The base #d97230 is unchanged. */
    --accent-primary: #d97230;
    --accent-primary-bright: #c2611f;
    --accent-primary-hover: #b35617;
    --accent-primary-text: #a34d13;
    --accent-primary-bg: rgba(217, 114, 48, 0.12);

    /* ===== SEMANTIC COLORS ===== */
    /* ⚠ Darker than the dark theme's: #22c55e on white is 1.9:1. These are the same hues at a
     * readable weight, and their tints are raised because 0.15 alpha over white is nearly nothing. */
    --color-success: #15803d;
    --color-success-bg: rgba(21, 128, 61, 0.12);
    --color-error: #b91c1c;
    --color-error-bg: rgba(185, 28, 28, 0.10);
    --color-warning: #b45309;
    --color-warning-bg: rgba(180, 83, 9, 0.12);
    --color-info: #1d4ed8;
    --color-info-bg: rgba(29, 78, 216, 0.10);

    /* ===== TRANSCRIPT SPEAKER COLOURS =====
     * ⚠ SIX, AND THEY MUST STAY DISTINGUISHABLE FROM EACH OTHER, not just from the background.
     * The dark theme's pastels (#ffd54f, #7ee787, …) were chosen against #0d0d0d and drop to
     * ~1.4:1 on white. These are the same six hues at a weight that reads on off-white. */
    /* ⛔ SAME SIX HUES, SAME ORDER as the dark block — index is identity here. */
    --speaker-1: #1d6fb8;   /* blue   */
    --speaker-2: #b5541f;   /* orange */
    --speaker-3: #1f7a3d;   /* green  */
    --speaker-4: #b03060;   /* pink   */
    --speaker-5: #7c3fb0;   /* purple */
    --speaker-6: #8a6d10;   /* yellow */

    /* the connection status dot, and the search-hit flash — both shipped with their own values */
    --status-warn: #b45309;
    --highlight-flash: rgba(217, 119, 6, 0.22);

    /* ===== A PANEL RAISED OFF THE PAGE (consultation screen) =====
     * ⛔ `--bg-elevated` DID NOT EXIST, and that was a real bug hiding in plain sight: assistent.css
     * asked for `var(--bg-elevated, #2a2a2a)` in one place and `var(--bg-elevated, #242424)` in
     * another. With no such variable the FALLBACK always won, so those panels were hardcoded dark
     * AND disagreed with each other by two shades. Defining it fixes both. */
    --bg-elevated: #ffffff;

    /* the assistent connection dots — their own values, not the semantic pair */
    --conn-connecting: #b26a00;
    --conn-connected: #2e7d4f;

    /* ===== TIER PILLS + THE ADMIN BUTTON =====
     * ⚠ THESE ARE NOT `--color-warning` / `--color-error`, even though they are amber and red.
     * The tier pill shipped with its own values (#b8860b/#e6b41e, #8b2e2e/#ff6b6b) and *"dark mode
     * should be how it is now"* — folding them into the semantic pair would quietly restyle the
     * dark site, which is the one thing this task must not do. Own token, own value. */
    --tier-beta-border: #b45309;
    --tier-beta-text: #92400e;
    --tier-beta-bg: rgba(180, 83, 9, 0.10);
    --tier-dev-border: #b91c1c;
    --tier-dev-text: #991b1b;
    --tier-dev-bg: rgba(185, 28, 28, 0.09);
    --tier-dev-bg-strong: #fde8e8;

    /* ===== PAGE GRADIENT — the landing/login canvas =====
     * The warm-to-cool pair the landing and login pages wash across the viewport. In dark these are
     * the original #1a1210 → #0f1312; in light they are the same two hues at the top of the scale,
     * so the wash is still there and still warm-left/cool-right rather than a flat slab. */
    --page-grad-a: #faf8f5;
    --page-grad-b: #f4f6f5;

    /* ===== ELEVATION TINT — the overlay/scrim behind modals ===== */
    --scrim: rgba(0, 0, 0, 0.35);

    /* ⚠ SHADOWS ARE A COLOUR TOO, and skipping them is the giveaway that a theme was done by
     * swapping backgrounds only: a 0.6-alpha black shadow reads as depth on #0d0d0d and as dirt
     * on #f7f7f5. Light gets softer and tighter; the dark block restores the originals. */
    --shadow-sm: 0 1px 2px rgba(16, 15, 12, 0.06);
    --shadow-default: 0 1px 3px rgba(16, 15, 12, 0.08);
    --shadow-lg: 0 2px 6px rgba(16, 15, 12, 0.10);
    --shadow-xl: 0 8px 28px rgba(16, 15, 12, 0.14);

    /* ⚠ Tell the BROWSER, not just our own CSS. Without this a light page keeps dark native
     * dropdowns, scrollbars and a white-on-white autofilled login field. */
    color-scheme: light;

    /* ===== SPACING (4px grid) ===== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 48px;
    --space-5xl: 64px;

    /* ===== TYPOGRAPHY ===== */
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-xs: 10px;
    --font-sm: 11px;
    --font-md: 12px;
    --font-lg: 13px;
    --font-xl: 14px;
    --font-2xl: 16px;
    --font-3xl: 18px;
    --font-4xl: 24px;
    --font-5xl: 32px;
    --font-6xl: 48px;

    /* ===== EFFECTS =====
     * ⚠ The shadows are NOT here — they are a colour, and they live in the two theme blocks below
     * with the rest of the colour. Stating them here as well would be one fact in two places. */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --transition-base: 0.2s ease-in-out;
    --transition-fast: 0.12s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * DARK — *"dark mode should be how it is now"*, so every value here is the one that shipped.
 * Only COLOUR is redefined. Spacing, type, radii and transitions are theme-independent and stating
 * them twice is how the two themes drift into different layouts.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    --bg-darkest: #0d0d0d;
    --bg-dark: #171717;
    --bg-medium: #1e1e1e;
    --bg-light: #262626;
    --bg-hover: #2d2d2d;

    --border-default: #3e3e42;
    --border-subtle: #2b2b2b;
    --border-focus: #717d7e;

    --text-primary: #d4d4d4;
    --text-secondary: #b8b8b8;
    --text-muted: #6a6a6a;
    --text-inverse: #ffffff;      /* headings: white on a dark page, as it always was */

    /* ⛔ THE SAME TWO VALUES AS LIGHT. The brand does not theme — see the note in the light block. */
    --brand-accent: #ff8c42;
    --brand-grad: linear-gradient(135deg, #d97230 0%, #ff8c42 100%);

    --accent-heading: #d97230;   /* exactly what these headers render today */

    --accent-primary: #d97230;
    --accent-primary-bright: #ff8c42;
    --accent-primary-hover: #ff9d5c;
    --accent-primary-text: #ff8c42;
    --accent-primary-bg: rgba(217, 114, 48, 0.15);

    --color-success: #22c55e;
    --color-success-bg: rgba(34, 197, 94, 0.15);
    --color-error: #ef4444;
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.12);

    /* ⛔ THE SIX FROM panels/diar_panel.js, IN THE ORIGINAL ORDER — blue, orange, green, pink,
       purple, yellow. The order is not cosmetic: speakers take these by index, so re-sorting them
       silently repaints every dark transcript. (It was re-sorted once while writing this and caught
       before it shipped — speaker 2 went from orange to green.) */
    --speaker-1: #4fb3ff;   /* blue   */
    --speaker-2: #ffb84f;   /* orange */
    --speaker-3: #7ee787;   /* green  */
    --speaker-4: #ff7eb6;   /* pink   */
    --speaker-5: #c8a2ff;   /* purple */
    --speaker-6: #ffd54f;   /* yellow */

    --status-warn: #ff9800;
    --highlight-flash: rgba(255, 187, 0, 0.2);

    /* ⚠ the two fallbacks disagreed (#2a2a2a vs #242424); this is the lighter of them, which is the
       one the raised panels were meant to use */
    --bg-elevated: #2a2a2a;

    --conn-connecting: #d9a030;
    --conn-connected: #4caf6e;

    /* the tier-pill and admin-button values that shipped, exactly */
    --tier-beta-border: #b8860b;
    --tier-beta-text: #e6b41e;
    --tier-beta-bg: rgba(184, 134, 11, 0.12);
    --tier-dev-border: #8b2e2e;
    --tier-dev-text: #ff6b6b;
    --tier-dev-bg: rgba(139, 46, 46, 0.12);
    --tier-dev-bg-strong: #5a1a1a;

    /* the pair that was hardcoded in index.html and login.html */
    --page-grad-a: #1a1210;
    --page-grad-b: #0f1312;

    --scrim: rgba(0, 0, 0, 0.7);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-default: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}