/* tokens.css — the Litmus design system as CSS variables.
   Single source of truth: colors, severity scale, elevation, motion, radius,
   type. Split out on its own so every template and component shares it, and
   so it maps cleanly to a Vue design-token module later. */
:root {
    --navy-50: #E7EDF3;
    --navy-100: #C3D2E1;
    --navy-200: #AFC2D6;
    --navy-300: #7E9DBB;
    --navy-700: #003057;
    --navy-600: #1A4670;
    --signal-50: #E6F3F7;
    --signal-200: #9FD3E4;             /* chip + pill borders on --sel */
    --signal-300: #63B7CE;
    --signal-500: #3095B4;
    --signal-600: #2A83A0;
    --signal-700: #226E88;
    --signal-800: #1B5970;
    --slate-0: #FFFFFF;
    --slate-50: #F5F7FA;
    --slate-100: #EBEFF4;
    --slate-200: #DCE3EB;
    --slate-300: #C3CDD8;
    --slate-400: #9AA8B7;
    --slate-500: #6E7E8F;
    --slate-600: #52616F;
    --slate-700: #3B4753;
    --slate-800: #262F38;
    --primary: var(--navy-700);
    --primary-h: var(--navy-600);
    --accent: var(--signal-500);
    --accent-tx: var(--signal-700);
    --chrome-top: #124A73;
    --chrome-side: #0F3F63;
    --chrome-hover: #1B5482;
    --on-chrome: var(--navy-200);
    --on-chrome-mute: var(--navy-300);
    --surface: var(--slate-0);
    --sunken: #E4E9F0;
    /* THE PAGE GROUND, split out from --sunken. --sunken does twelve jobs --
       table headers, field-group heads, the list footer, the add-line strip,
       the calendar -- several of which carry 10.5px text, so it cannot be
       darkened. The ground carries no text of its own: every panel sits on
       top of it. Separating them lets the ground take a value that gives the
       white panel a real edge. 1.37 against the panel, up from 1.21. */
    --ground: #D5DDE9;
    --tx: var(--slate-800);
    --tx2: var(--slate-600);
    --tx3: var(--slate-400);
    --line: var(--slate-200);
    --line-s: var(--slate-300);
    --sel: var(--signal-50);
    --hover: var(--slate-100);
    --focus: var(--signal-500);
    --focus-ring: rgba(48, 149, 180, .22);   /* focus glow, themed */
    --band: #EDF2F7;
    /* One step between the content surface and the title band. The panel head,
       the record toolbar and the list toolbar all shared --band, so three
       different roles looked identical and stacked into one slab. The TITLE
       keeps --band; the strips beneath it recede to this. */
    --band-2: #F5F8FA;
    --band-line: #D3DDE6;
    --safe: #1E8E5A;
    --safe-rgb: 30, 142, 90;           /* --safe as channels, for the pulse ring */

    /* Chart palette. Deliberately brighter and more saturated than the UI
       chrome: a donut slice has to be told apart from its neighbour at 14 px
       across a room, which is a different job from a border or a label.
       Ordered so adjacent slices never share a hue family. */
    --c1: #16A34A;   /* green   */
    --c2: #2563EB;   /* blue    */
    --c3: #06B6D4;   /* cyan    */
    --c4: #F59E0B;   /* amber   */
    --c5: #8B5CF6;   /* violet  */
    --c6: #64748B;   /* slate   */
    --c7: #EF4444;   /* red     */
    --c8: #EC4899;   /* pink    */
    --c9: #84CC16;   /* lime    */
    --safe-bg: #E7F4EE;
    --safe-tx: #136B43;
    --low: #3095B4;
    --low-bg: #E6F3F7;
    --low-tx: #226E88;
    --medium: #F5C51D;
    --medium-bg: #FEF6D2;
    --medium-tx: #866312;
    --medium-dot: #D9A800;
    --high: #EC8A0C;
    --high-bg: #FCEBD5;
    --high-tx: #9A5A05;
    --critical: #D8323F;
    --critical-bg: #FBE6E8;
    --critical-tx: #9E1B26;
    --e1: 0 1px 2px rgba(16, 24, 40, .07), 0 1px 1px rgba(16, 24, 40, .05);
    --e2: 0 1px 3px rgba(16, 24, 40, .11), 0 5px 14px rgba(16, 24, 40, .08);
    --e3: 0 4px 10px rgba(16, 24, 40, .12), 0 12px 28px rgba(16, 24, 40, .13);
    --e-app: 0 3px 10px rgba(9, 20, 34, .22);
    --ease: cubic-bezier(.2, 0, 0, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --r: 7px;
    --rs: 3px;
    --font: "IBM Plex Sans", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
    /* were hardcoded in app.css, so they could not follow a theme */
    --zebra: #FAFBFD;               /* alternating table / list rows */
    --sheen: #FCFDFE;               /* top of the ribbon gradient */
    --on-chrome-strong: #EAF1F7;    /* strongest text on the app bar */

    /* THE MARK. An L read as a test strip: a stem dipped into a foot, with
       the junction taking a darker step of the FOOT colour -- never a third
       brand colour. The junction is dropped below 32px, so the 26px header
       mark and the 16px favicon are flat. */
    --logo-stem: var(--slate-50);      /* #F5F7FA, on navy chrome */
    --logo-foot: var(--signal-300);    /* #63B7CE */
    --logo-junction: var(--signal-600);/* #2A83A0 */
}


/* =====================================================================
   THEME · LITMUS PAPER VIOLET
   Indigo ink · indicator violet · steel neutrals.

   Set with <html data-theme="violet">. Everything above is the default
   NAVY theme and is not modified — this block only overrides roles, so
   any component already using a role token themes for free.

   Three decisions:
     1. The ink IS the mix — #1B2450 is navy pulled toward violet, so the
        accent reads as the ink lit up rather than a foreign colour.
     2. Neutrals are steel, not slate. The navy theme's greys are
        blue-leaning; removing that cast is the industrial move.
     3. Values were solved against WCAG, not chosen by eye. This theme
        fixes three failures the navy theme still has:
             --tx3 on the band  2.15 -> 4.54
             white on accent    3.45 -> 5.96
             control borders    1.29 -> 3.02
   ===================================================================== */
:root[data-theme="violet"] {
    /* ink — navy folded toward violet */
    --ink-50: #E9EBF3;
    --ink-100: #C9CEE4;
    --ink-300: #838BBA;
    --ink-600: #26326B;
    --ink-700: #1B2450;
    --ink-800: #131B38;
    --ink-900: #0B1226;
    /* violet — the indicator */
    --violet-50: #EFEDFB;
    --violet-200: #C7C0F0;
    --violet-400: #8D7EF0;
    --violet-500: #6350C9;
    --violet-600: #5341B0;
    --violet-700: #4A3AA8;
    /* chrome — steel, no blue cast */
    --chrome-50: #F2F4F5;
    --chrome-100: #E7EAEC;
    --chrome-200: #CAD0D4;
    --chrome-300: #B9C0C5;
    --chrome-400: #7E8790;
    --chrome-500: #636A71;
    --chrome-600: #545C63;
    --chrome-800: #272D32;

    --primary: var(--ink-700);
    --primary-h: var(--ink-600);
    --accent: var(--violet-500);
    --accent-tx: var(--violet-700);      /* accent as type under 18px */

    --chrome-top: var(--ink-700);
    --chrome-side: var(--ink-800);
    --chrome-hover: var(--ink-600);
    --on-chrome: var(--ink-100);
    --on-chrome-mute: var(--ink-300);
    --on-chrome-strong: var(--chrome-50);

    --surface: #FFFFFF;
    --sunken: var(--chrome-100);
    /* ink tint, one value step deeper than the bars — see the note above.
       Separates from the steel strips by BOTH hue and value. */
    --ground: #D8DCEC;
    --band: var(--chrome-100);
    --band-2: var(--chrome-50);          /* the strip step — see the note above */
    --band-line: var(--chrome-200);
    --zebra: #FAFBFB;
    --sheen: #FBFCFC;

    --tx: var(--chrome-800);
    --tx2: var(--chrome-600);
    --tx3: var(--chrome-500);            /* 4.54:1 even on the band */

    /* a divider may be quiet; a control border carries meaning and must
       clear 3:1. Inputs use --line-s, which is why it is the darker one. */
    --line: var(--chrome-200);
    --line-s: var(--chrome-400);         /* 3.02:1 on the band */

    --sel: var(--violet-50);
    --hover: var(--chrome-50);
    --focus: var(--violet-500);
    --focus-ring: rgba(99, 80, 201, .22);

    /* SEVERITY. --low moves off the accent: in the navy theme --accent and
       --low are both #3095B4, so a link and a low badge are the same colour.
       Minimum hue separation from violet across all five is now 57 deg. */
    --safe: #1E7A4F;
    --safe-rgb: 30, 122, 79;

    /* Chart palette, violet build. c5 shifts off the theme accent so a slice
       is never mistaken for a selected control, and the whole ramp lifts a
       step: on this theme's cooler ground the navy values read muddy. */
    --c1: #15A34A;
    --c2: #3B82F6;
    --c3: #06B6D4;
    --c4: #F59E0B;
    --c5: #A855F7;
    --c6: #6B7280;
    --c7: #F43F5E;
    --c8: #EC4899;
    --c9: #84CC16;
    --safe-bg: #E6F2EB;
    --safe-tx: #125C3A;
    --low: #3E7C8C;
    --low-bg: #E7F0F2;
    --low-tx: #2C5C69;
    --medium: #B5820A;
    --medium-bg: #F8EFD9;
    --medium-tx: #7A5807;
    --medium-dot: #9A6E08;
    --high: #C1521A;
    --high-bg: #FAEADF;
    --high-tx: #8A3A12;
    --critical: #B3261E;
    --critical-bg: #F9E7E5;
    --critical-tx: #8A1C16;

    /* elevation cooled to the ink rather than neutral black */
    --e1: 0 1px 2px rgba(11, 18, 38, .08), 0 1px 1px rgba(11, 18, 38, .05);
    --e2: 0 1px 3px rgba(11, 18, 38, .12), 0 5px 14px rgba(11, 18, 38, .08);
    --e3: 0 4px 10px rgba(11, 18, 38, .13), 0 12px 28px rgba(11, 18, 38, .14);
    --e-app: 0 3px 10px rgba(11, 18, 38, .24);

    /* Some components in app.css reach for a RAMP token rather than a role
       -- the logo tile, the avatar chips, the lookup panels. Remapping the
       ramps themselves means those theme too, without editing app.css. */
    --signal-50: var(--violet-50);
    --signal-200: var(--violet-200);
    --signal-300: var(--violet-400);
    --signal-500: var(--violet-500);
    --signal-600: var(--violet-600);
    --signal-700: var(--violet-700);
    --signal-800: #3A2D85;
    /* --slate-50 was missed here, so six surfaces -- the lookup panel's search
       strip and five permit-form bands -- kept the NAVY theme's blue-leaning
       #F5F7FA while everything around them moved to steel. */
    --slate-50: var(--chrome-50);
    --slate-100: var(--chrome-100);
    --slate-400: var(--chrome-500);   /* was a 2.43:1 label colour */
    --slate-800: var(--chrome-800);

    --logo-stem: var(--chrome-50);
    --logo-foot: var(--violet-400);
    --logo-junction: var(--violet-500);

    /* square surfaces read as machined steel */
    --r: 0;
    --rs: 0;
}