/* =============================================================================
   tokens.css — the single source of colour, type, and elevation for the site.
   Loaded before every other stylesheet, so styles.css, sync.css and the
   per-page <style> blocks all theme from here.

   ACCESSIBILITY CONTRACT — every value below was measured, not eyeballed:
     · text tokens clear WCAG 2.1 AA (4.5:1) on EVERY surface they're used on,
       including the tinted ones (check --brand-text on white, --canvas,
       --brand-tint and --brand-tint-2);
     · fill tokens (--*-solid) clear 4.5:1 against white, so a filled button
       can always carry a white label;
     · --line-strong clears 3:1 for input borders (WCAG 1.4.11 non-text). The
       old #d7dbe2 border was 1.39:1 — a real failure on every tool page;
     · --brand-bright is for identity and links on dark surfaces only.
       Use --brand-text for words on light backgrounds.

   Re-run the checker after changing anything here.
   ========================================================================== */

:root {
    /* ---- Neutrals -------------------------------------------------------- */
    --ink:            #14161C;   /* headings                     18.1:1 on white */
    --ink-2:          #333A47;   /* body copy                    11.4:1 on white */
    --ink-3:          #5A6472;   /* muted / captions              6.0:1 on white */
    --line:           #E3E6EC;   /* hairlines, card edges */
    --line-strong:    #767F8C;   /* input borders                 4.1:1 on white */
    --surface:        #FFFFFF;   /* cards */
    --surface-2:      #F7F8FC;   /* inset panels */
    --canvas:         #F7F8FC;   /* page background */

    /* ---- Brand indigo ---------------------------------------------------- */
    --brand:          #4338CA;
    --brand-rgb:      67, 56, 202; /* translucent brand glows */
    --brand-bright:   #A5B4FC;   /* identity and links on dark surfaces */
    --brand-mid:      #4338CA;   /* gradient stop */
    --brand-solid:    #4338CA;   /* fills that carry white text   7.9:1 */
    --brand-text:     #4338CA;   /* words + links on light        7.9:1 on white */
    --brand-deep:     #3730A3;   /* pressed / hover fills         9.9:1 */
    --brand-tint:     #EEF2FF;
    --brand-tint-2:   #C7D2FE;

    /* ---- Accent hues ----------------------------------------------------- */
    /* Each: -solid (fill behind white text), -text (words on its own tint),
       -tint (wash). All measured >= 4.5:1 in both roles. */
    --blue-solid:     #2563EB;  --blue-text:     #1D4ED8;  --blue-tint:     #E8F0FE;
    --violet-solid:   #7C3AED;  --violet-text:   #6D28D9;  --violet-tint:   #F3EEFF;
    --indigo-solid:   #4F46E5;  --indigo-text:   #4338CA;  --indigo-tint:   #EEF0FF;
    --emerald-solid:  #047857;  --emerald-text:  #046B4D;  --emerald-tint:  #E6F7F0;
    --teal-solid:     #0F766E;  --teal-text:     #0E6660;  --teal-tint:     #E4F5F3;
    --rose-solid:     #E11D48;  --rose-text:     #BE123C;  --rose-tint:     #FFE9EE;
    --fuchsia-solid:  #A21CAF;  --fuchsia-text:  #86198F;  --fuchsia-tint:  #FDEBFD;
    --amber-solid:    #B45309;  --amber-text:    #92400E;  --amber-tint:    #FEF6E0;

    /* ---- Semantic feedback ---------------------------------------------- */
    --ok-bg:     #DCFCE7;  --ok-text:     #05603A;  --ok-line:   #86EFAC;
    --warn-bg:   #FEF3C7;  --warn-text:   #854D0E;  --warn-line: #FDE047;
    --bad-bg:    #FEE2E2;  --bad-text:    #991B1B;  --bad-line:  #FCA5A5;
    --info-bg:   #E8F0FE;  --info-text:   #1D4ED8;  --info-line: #BFD4FD;

    /* ---- Dark shell (navbar, footer) ------------------------------------ */
    --shell:          #14161C;
    --shell-2:        #262B36;   /* hover rows */
    --shell-text:     #C7CEDB;   /* 11.4:1 on --shell */
    --shell-text-hi:  #FFFFFF;

    /* ---- Per-page accent -------------------------------------------------
       Components reference --accent-*; [data-accent] remaps the three tokens,
       so one attribute re-hues an entire tool page. Defaults to brand. */
    --accent-solid:   var(--brand-solid);
    --accent-text:    var(--brand-text);
    --accent-tint:    var(--brand-tint);
    /* Gradient light stop. Clears 3:1 with white, so a white ICON may sit on
       it — but NOT 4.5:1, so never put text on it. Text-bearing badges use
       --accent-solid, which clears 4.5:1 with white in every hue. */
    --accent-vivid:   var(--brand);

    /* ---- Elevation, radius, motion --------------------------------------- */
    --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 24px;  --r-pill: 999px;
    --shadow-1: 0 1px 2px rgba(20, 22, 28, 0.06), 0 2px 8px rgba(20, 22, 28, 0.05);
    --shadow-2: 0 4px 12px rgba(20, 22, 28, 0.07), 0 12px 28px rgba(20, 22, 28, 0.07);
    --shadow-3: 0 8px 20px rgba(20, 22, 28, 0.09), 0 24px 48px rgba(20, 22, 28, 0.10);
    --ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--ink);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Accent themes. Applied as [data-accent="violet"] on a page wrapper. */
[data-accent="brand"]   { --accent-solid: var(--brand-solid);   --accent-text: var(--brand-text);   --accent-tint: var(--brand-tint);   --accent-vivid: var(--brand); }
[data-accent="blue"]    { --accent-solid: var(--blue-solid);    --accent-text: var(--blue-text);    --accent-tint: var(--blue-tint);    --accent-vivid: #3B82F6; }
[data-accent="violet"]  { --accent-solid: var(--violet-solid);  --accent-text: var(--violet-text);  --accent-tint: var(--violet-tint);  --accent-vivid: #8B5CF6; }
[data-accent="indigo"]  { --accent-solid: var(--indigo-solid);  --accent-text: var(--indigo-text);  --accent-tint: var(--indigo-tint);  --accent-vivid: #6366F1; }
[data-accent="emerald"] { --accent-solid: var(--emerald-solid); --accent-text: var(--emerald-text); --accent-tint: var(--emerald-tint); --accent-vivid: #059669; }
/* teal's vivid stop is #0D9488, not the brighter #14B8A6: white on #14B8A6 is
   2.49:1 and fails even the 3:1 non-text threshold for a white glyph. */
[data-accent="teal"]    { --accent-solid: var(--teal-solid);    --accent-text: var(--teal-text);    --accent-tint: var(--teal-tint);    --accent-vivid: #0D9488; }
[data-accent="rose"]    { --accent-solid: var(--rose-solid);    --accent-text: var(--rose-text);    --accent-tint: var(--rose-tint);    --accent-vivid: #F43F5E; }
[data-accent="fuchsia"] { --accent-solid: var(--fuchsia-solid); --accent-text: var(--fuchsia-text); --accent-tint: var(--fuchsia-tint); --accent-vivid: #C026D3; }
[data-accent="amber"]   { --accent-solid: var(--amber-solid);   --accent-text: var(--amber-text);   --accent-tint: var(--amber-tint);   --accent-vivid: #D97706; }

/* =============================================================================
   User display preferences (set on <html> by site-accessibility.js).
   These are token overrides, so a preference re-themes everything downstream
   including the per-page <style> blocks — no per-component patching.
   ========================================================================== */

/* Stronger contrast: flatten tints to white, deepen every text token, and make
   borders unmistakable. Pushes body copy past AAA (7:1). */
html[data-strong-contrast="true"] {
    --ink: #000000;
    --ink-2: #14161C;
    --ink-3: #333A47;
    --line: #767F8C;
    --line-strong: #14161C;
    --canvas: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #FFFFFF;
    --brand-text: #3730A3;
    --brand-tint: #FFFFFF;
    --shell: #000000;
    --shell-text: #FFFFFF;
    --shadow-1: 0 0 0 1px var(--line);
    --shadow-2: 0 0 0 2px var(--line);
    --shadow-3: 0 0 0 2px var(--line);
}

/* Calm display: no gradients, movement, or coloured glow. Handled as tokens
   where possible; the rules that kill animation live in styles.css. */
html[data-calm-display="true"] {
    --shadow-1: 0 0 0 1px var(--line);
    --shadow-2: 0 0 0 1px var(--line);
    --shadow-3: 0 0 0 1px var(--line);
}