/* Instrument tokens (V2): the one source of every colour, face, size, space,
   radius and duration. The rules they serve are DESIGN.md (Instrument house
   style), checked by test_house_style; the "Instrument" spec page and the
   design book show them in pictures.

   Every page loads this sheet first: the app shell (base.html, before app.css),
   the sign-in, the Vault Kiosk, the 500 page and the Django admin
   (templates/admin/base_site.html, before admin.css). Dark is the default;
   Travertine (light) applies under :root[data-theme="light"], set before paint
   from the per-device choice in localStorage 'gg-theme'
   (inventory/_theme_before_paint.html). Stylesheets read these names and
   declare no colour of their own. One known exception: app.css's Bootstrap
   bridge still spells Bootstrap's comma rgb triplets (--bs-*-rgb) as literal
   dark values, because Bootstrap's rgba() utilities cannot read the
   space-separated *-rgb tokens here. */

:root {
    /* —— Instrument palette, dark (the default) ——
       Surfaces step up a four-tier ramp; layers separate by tier and a 1px
       hairline, never by shadow. */
    --bg-0: #0F0F0E;          /* page */
    --bg-1: #171716;          /* surface */
    --bg-2: #20201E;          /* key, raised */
    --bg-3: #2A2A27;          /* pressed, selected */
    --line: #2E2D2A;          /* hairline */
    --line-strong: #4A4944;   /* strong rule */
    /* The edge of what you press or type into: fields, boxes, keys and the
       underline of a link or quiet key. 3:1 on bg-0 to bg-2 in every face
       (WCAG 1.4.11; test_house_style). Lines that only separate stay
       --line and --line-strong, so planes stay planes (Planes, not boxes). */
    --edge: #6C6B65;          /* 3.59:1 on bg-0, 3.05:1 on bg-2 */
    /* Text holds 4.5:1 on all four grounds, bg-3 included, in every face
       (test_house_style). Figures read mid-Stream use text-1, above 7:1. */
    --text-1: #EDECE6;        /* 15.2:1 on bg-1, 12.2:1 on bg-3 */
    --text-2: #A8A79F;        /* 7.4:1, 6.0:1 on bg-3 */
    --text-3: #929189;        /* 5.7:1, 4.55:1 on bg-3 */
    /* rgb triplets for the rare translucent wash: rgb(var(--ink-rgb) / 0.06) */
    --ink-rgb: 237 236 230;
    --shade-rgb: 0 0 0;

    /* —— Colour: five families, one job each (DESIGN.md, Colour) ——
       Everything above is neutral. Every hue below belongs to one family and
       is drawn only where its family allows (test_house_style,
       ReservationTests). Four limits hold on top: at most four meaning hues
       on any one screen; keys that only go somewhere (Back to …) stay plain;
       every reservation is tested; and past four Channels the numeral keeps
       counting while colour and shape start again. */

    /* 1. Meaning: four hues, one meaning each, always with a word and a
       shape.
       green  = each page's main key (the one pressed most); success is a word
       red    = Red Light only
       amber  = Unmatched only
       blue   = LIVE and selection (today's ice blue, kept) */
    --signal: #3DBE6B;
    --on-signal: #0F0F0E;
    --signal-rgb: 61 190 107;
    --red: #F5634F;           /* 4.65:1 on bg-3 */
    --red-rgb: 245 99 79;
    --amber: #E8A23A;
    --amber-rgb: 232 162 58;
    --live: #5AC8FA;
    --live-rgb: 90 200 250;

    /* 2. Money (Pryce, 2026-10-06): profit and loss borrow the green and the
       red, on margin figures only, on the Sale Logger and Stream detail (its
       Sales log and Profit by item), so they follow every theme. A loss
       always carries its minus sign, so it reads without the colour. Never
       on charts, keys or row fills. */
    --profit: var(--signal);
    --loss: var(--red);

    /* 3. Labels bought (Pryce, 2026-10-09: "a color and very visible under
       shipping"): the green marks a Stream whose every label is bought, on
       the Shipping list only, as a state: a bar down the row and a tick and
       the words beside its title, never a filled chip that looks like a
       key. */
    --labels-bought: var(--signal);

    /* 4. Data: what an item is. Metals, Mystery and Singles, on glyphs,
       swatches and tabs only, never behind words or on a key.
       Metals: a small swatch plus the element symbol, never a fill. Gold
       (the Pavilion's onyx) appears for gold products only. */
    --au: #D4B26A;
    --au-rgb: 212 178 106;
    --ag: #B9BCC0;
    --pt: #D6DADF;
    --cu: #C8835A;
    /* Mystery packs: the one category colour that is not a metal. Violet,
       kept clear of LIVE blue, Channel 2 plum, Red Light red and Unmatched
       amber. On category glyphs (logger-category-colours.md) and the
       Surprise Set tab. */
    --mystery: #A98BE6;
    /* Stream kind tabs: a Surprise Set Stream wears --mystery (random draw),
       a Singles Stream this yellow-green, violet's opposite on the wheel. */
    --singles: #E8FF4A;
    --singles-rgb: 232 255 74;

    /* 5. Address: which Channel, which employee. Always with a numeral, shape
       or icon and the name, never on keys or row fills.
       Channel slots: numeral and shape (1 square, 2 diamond, 3 ring, 4 bar).
       Past four the numeral keeps counting and colour and shape start again
       (templatetags/channel_slots.py): Channel 5 is a blue square numbered 5. */
    --ch-1: #6A96C8;
    --ch-2: #C08DB5;
    --ch-3: #CDD0C2;
    --ch-4: #8FB3C9;
    /* Employee colours: each employee's mark beside their name (one colour,
       one flat mark; inventory/employee_marks.py). Clear of red, amber, LIVE
       blue, the main key's green, the metals, Mystery violet and the Channel
       slots. Never a fill, never without the name. */
    --emp-teal: #49C4B7;
    --emp-rose: #FA8FA4;
    --emp-lime: #BBE263;
    --emp-periwinkle: #8893D6;
    --emp-orchid: #DF81E5;
    --emp-moss: #809E5A;
    --emp-magenta: #FF5FB0;
    --emp-indigo: #8E86FF;
    --emp-cocoa: #C49A7A;
    --emp-lemon: #F0E07A;

    /* —— Off the floor, outside the families: brand gold (spec v6, "Where
       colour lives"), the warm onyx, only on the sign-in page, the favicon,
       mailers and the printed Sticker. Never on a working page, where gold
       means gold products and the mark stays text colour. Not "--brand":
       that retired name stays banned (test_theme_css). —— */
    --house-gold: #D8B27A;

    /* The 18% grey card product photos are shot on (L* 50), the same on both
       themes: a catalog photo's frame shows it while the file loads. */
    --plate-ground: #777777;

    /* —— Type: Geist and Geist Mono (fonts.css), Regular and Medium ——
       Mono for every number that is counted or reconciled, and for the small
       caps legends that label controls. Emphasis is Medium. SemiBold (600)
       is only for the glance words (the LIVE word, Channel numerals and
       names, the Stream kind tab, and the Sticker and Bag numerals packers
       match at a glance in Pack Mode and Pictures) and for glance figures on
       the light faces (--figure-weight). Nothing heavier (test_house_style). */
    --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-display: var(--font-ui);
    --font-body: var(--font-ui);

    /* Type ladder: every line-height lands on the 4px baseline */
    --text-xs: 0.75rem;     /* 12/16 legend, caption, data */
    --text-sm: 0.8125rem;   /* 13 */
    --text-base: 0.875rem;  /* 14/20 table body, form label */
    --text-lg: 1rem;        /* 16/24 body, section heading on phone */
    --text-xl: 1.125rem;    /* 18/24 section heading */
    --text-2xl: 1.5rem;     /* 24/32 page title on phone */
    --text-3xl: 2rem;       /* 32/40 page title on desktop */
    --text-kpi: 1.5rem;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-body: 1.5;
    --tracking-label: 0.06em;    /* mono caps legends */
    --tracking-display: -0.02em; /* 32px and above */

    /* Role type tokens — pages declare intent, not pixels */
    --type-display: 2rem;                         /* page title 32/40 (24/32 on phones) */
    --type-section: 1.125rem;                     /* 18/24 section heading */
    --type-card: 1rem;                            /* 16/24 item heading */
    --type-body: 0.875rem;
    --type-meta: 0.8125rem;
    --type-label: 0.75rem;                        /* mono caps legend */
    --weight-display: 500;
    --weight-section: 500;

    /* Sizes by distance (DESIGN.md, Type). A glance figure, read mid-task,
       subtends about 30 minutes of arc where it is read; the answer, the one
       figure a screen exists for, is about three times that. Font size =
       distance x tan 30' / 0.71 (Geist Mono's digit height) / mm per px.
       The desk (60 cm) is the default and a phone in the hand (35 cm) takes
       its own below; the propped Logger (the Bay, 70 cm) and Pack Mode (the
       bench, 55 cm) read their own. The distances are estimates until the
       filmed trial Stream measures them. */
    --type-glance-hand: 1.75rem;    /* 28/36 */
    --type-answer-hand: 5.5rem;     /* 88 */
    --type-glance-desk: 2rem;       /* 32/40 */
    --type-answer-desk: 7rem;       /* 112 */
    --type-glance-bench: 2.5rem;    /* 40/48 */
    --type-answer-bench: 7.5rem;    /* 120 */
    --type-glance-bay: 3.25rem;     /* 52/56 */
    --type-answer-bay: 9.75rem;     /* 156 */
    --type-kpi: var(--type-glance-desk);      /* a KPI readout is a glance figure */
    --type-poster: var(--type-answer-desk);   /* one poster number per page, the answer */
    /* Glance figures: Medium with a little tracking on Dark, where light
       strokes spread; SemiBold with more on the light faces. Posters stay
       tight. */
    --figure-weight: 500;
    --figure-tracking: 0.03em;

    /* —— Grid: 4px baseline, 8px module ——
       Phone: 16px margins, 4 columns, 16px gutter.
       Desk: 32px margins, 12 columns, 24px gutter, capped at 1200px. */
    --space-1: 0.25rem;  /* 4 */
    --space-2: 0.5rem;   /* 8 */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-6: 1.5rem;   /* 24 */
    --space-8: 2rem;     /* 32 */
    --space-12: 3rem;    /* 48 */
    --space-16: 4rem;    /* 64 */
    --section-gap: 3rem; /* 48 on the desk, 24 on phones */
    --gutter: 1.5rem;
    --page-margin: 2rem;
    --content-max: 1200px;

    /* Radius follows the Braun keys: soft-square, never pills.
       chip 4 · input 6 · key and button 8 · bounded tile 12 · plane 0 */
    --radius-chip: 4px;
    --radius-input: 6px;
    --radius-key: 8px;
    --radius-tile: 12px;

    /* —— Older names, now pointing at the Instrument values ——
       Page stylesheets still read these; new rules should use the names
       above. The page passes retire them. */
    --page-bg: var(--bg-0);
    --content-bg: var(--bg-0);
    --surface: var(--bg-1);
    --surface-raised: var(--bg-2);
    --surface-muted: var(--bg-2);
    --surface-glass: var(--bg-1);
    --glass: var(--bg-1);
    --glass-solid: var(--bg-1);
    --border-subtle: var(--line);
    --border: var(--line);
    --border-strong: var(--line-strong);
    --text: var(--text-1);
    --text-muted: var(--text-2);
    --text-dim: var(--text-3);

    /* "Clickable" has no colour of its own: links and buttons are text-
       coloured, blue marks LIVE and the current selection, and the one
       commit key is green. */
    --accent: var(--text-1);
    --accent-hover: var(--text-1);
    --accent-strong: var(--signal);
    --silver: var(--ag);
    --success: var(--signal);
    --warning: var(--amber);
    --danger: var(--red);

    /* Status inks and washes. Success is a word in text colour; info is
       neutral; red and amber keep their one meaning each. */
    --success-ink: var(--signal);
    --success-bg: rgb(var(--signal-rgb) / 0.12);
    --warning-ink: var(--amber);
    --warning-bg: rgb(var(--amber-rgb) / 0.12);
    --danger-ink: var(--red);
    --danger-bg: rgb(var(--red-rgb) / 0.12);
    --info-ink: var(--text-2);
    --info-bg: rgb(var(--ink-rgb) / 0.06);
    --live-ink: var(--live);
    --live-bg: rgb(var(--live-rgb) / 0.14);

    /* Gold is a metal now, not the brand: these exist for gold-product data
       only (a swatch, the "Au" tag). Nothing in the chrome reads them. */
    --gold: var(--au);
    --gold-rgb: 212, 178, 106;
    --gold-light: var(--au);
    --gold-dark: #8A6A1F;
    --gold-sheen: var(--au);
    --gold-metal: var(--au);

    /* The commit key */
    --btn-primary-top: var(--signal);
    --btn-primary-bottom: var(--signal);

    /* Keyboard focus: a 2px ring in text colour, 2px off the edge. Green
       focus would dilute the commit key. */
    --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--text-1);

    --radius-inset: var(--radius-key);
    --radius: var(--radius-tile);
    --radius-sm: var(--radius-key);
    --radius-feature: var(--radius-tile);

    /* Elevation is effectively none: tiers and hairlines do the work */
    --shadow: none;
    --shadow-sm: none;
    --shadow-feature: none;

    /* Motion: only state changes move. Key travel 80ms, a sheet 160ms. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-key: 80ms;
    --dur-fast: 80ms;
    --dur: 160ms;
    --dur-slow: 160ms;

    /* —— Garnish (DESIGN.md: every garnish stands for something) ——
       The dot field marks a surface waiting for a signal; drawn in the
       strong rule grey, so each theme carries its own. */
    --garnish-dot: var(--line-strong);
    --garnish-pitch: 8px;           /* the module */
    --garnish-tick: var(--line-strong);
    --garnish-tick-minor: var(--line);
    --garnish-index: var(--text-1);
    --garnish-mark: var(--text-3);

    color-scheme: dark;
}

@media (max-width: 767.98px) {
    :root {
        --type-display: 1.5rem;  /* 24/32 */
        --type-kpi: var(--type-glance-hand);
        --type-poster: var(--type-answer-hand);
        --section-gap: 1.5rem;
        --page-margin: 1rem;
        --gutter: 1rem;
    }
}

/* —— Travertine, the light theme ——
   Same layout, a different material. Chosen per device with the Dark / Light
   keys in the sidebar footer (instrument.js); dark stays the default. */
:root[data-theme="light"] {
    --bg-0: #F4F3EF;
    --bg-1: #FFFFFF;
    --bg-2: #ECEBE6;
    --bg-3: #E2E1DB;
    --line: #DAD9D3;
    --line-strong: #B9B8B1;
    --edge: #878680;       /* 3.29:1 on bg-0, 3.06:1 on bg-2 */
    /* Text and the meaning colours used as text hold 4.5:1 down to bg-3
       (#E2E1DB), the darkest ground here and on the Logger's Alu plate, which
       takes these same values (logger.css). */
    --text-1: #1A1A18;
    --text-2: #56554F;
    --text-3: #64635C;     /* 4.6:1 on bg-3 */
    --ink-rgb: 26 26 24;
    --signal: #047338;     /* 4.56:1 on bg-3; white on it 5.98:1 */
    --on-signal: #FFFFFF;
    --signal-rgb: 4 115 56;
    /* Red Light red sits at L* 37, well below amber, so the two stay apart
       for red-green colour-blind eyes (deutan dE00 13, was 2.9). */
    --red: #A52718;
    --red-rgb: 165 39 24;
    /* Amber is a glyph colour on the light faces (3.27:1 on bg-3): a text
       amber dark enough for 4.5:1 would sit next to the red for deuteranopes,
       so the Unmatched word is ink (--warning-ink) and the triangle keeps the
       hue. */
    --amber: #B06A00;
    --amber-rgb: 176 106 0;
    --warning-ink: var(--text-1);
    --live: #0066AF;       /* spec v5: LIVE on light and alu; 4.55:1 on bg-3 */
    --live-rgb: 0 102 175;
    --au: #8A6A1F;
    --au-rgb: 138 106 31;
    --ag: #686D74;
    --pt: #55606B;
    --cu: #9A4F2A;
    /* Darker than LIVE blue (L* 31 against 42), so the Set tab and the LIVE
       word stay apart for colour-blind eyes. */
    --mystery: #543596;
    --singles: #2F4A00;
    --singles-rgb: 47 74 0;
    --ch-1: #2F5A8A;
    --ch-2: #7A3F6B;
    --ch-3: #59656E;
    --ch-4: #48677F;
    --emp-teal: #00736D;
    --emp-rose: #B3385D;
    --emp-lime: #698300;
    --emp-periwinkle: #6A70C5;
    --emp-orchid: #93329A;
    --emp-moss: #455E29;
    --emp-magenta: #B0186A;
    --emp-indigo: #4A41C0;
    --emp-cocoa: #6E4A30;
    --emp-lemon: #6E6C00;
    --house-gold: #8A6A1F;
    --gold-rgb: 138, 106, 31;
    --figure-weight: 600;
    --figure-tracking: 0.06em;
    color-scheme: light;
}

/* —— The Alu plate, the light aluminium face ——
   The bench and the Bay by day (DESIGN.md, Faces): on a phone, the Sale
   Logger and Pack Mode open on it from 06:00 to 17:00 on the phone's clock
   and on the theme otherwise, unless the phone picked Dark or Alu in the
   Logger's ⋯ (inventory/_face_before_paint.html sets data-face on <html>).
   Its keys are light, so the main key in the plate's ink is the one filled
   key (Pryce's call, 10 Oct). Last in this file, so the plate also wins over
   Travertine's :root tokens (same weight): the face sits over either theme. */
:root[data-face="alu"] {
    --bg-0: #E4E3DF;
    --bg-1: #EFEEEA;
    --bg-2: #F7F6F2;
    --bg-3: #ECEBE6;
    --line: #C9C8C2;
    --line-strong: #A9A8A1;
    --edge: #81817A;          /* 3.05:1 on the plate (bg-0) */
    /* Text, meaning, Mystery, Channel and employee colours are Travertine's
       (above): its bg-3 is the darkest ground they are measured on, a shade
       darker than this plate. */
    --text-1: #1A1A18;
    --text-2: #56554F;
    --text-3: #64635C;
    --ink-rgb: 26 26 24;
    --signal: #047338;
    --signal-rgb: 4 115 56;
    --on-signal: #FFFFFF;
    --red: #A52718;
    --red-rgb: 165 39 24;
    --amber: #B06A00;
    --amber-rgb: 176 106 0;
    --warning-ink: var(--text-1);
    --live: #0066AF;
    --live-rgb: 0 102 175;
    --au: #8A6A1F;
    --au-rgb: 138 106 31;
    --ag: #6B6F75;
    --pt: #5F656C;
    --cu: #9A5530;
    --mystery: #543596;
    --singles: #2F4A00;
    --singles-rgb: 47 74 0;
    /* Channel slots take the light theme's deeper values on the plate. */
    --ch-1: #2F5A8A;
    --ch-2: #7A3F6B;
    --ch-3: #59656E;
    --ch-4: #48677F;
    /* Employee marks on the plate take the light theme's values too. */
    --emp-teal: #00736D;
    --emp-rose: #B3385D;
    --emp-lime: #698300;
    --emp-periwinkle: #6A70C5;
    --emp-orchid: #93329A;
    --emp-moss: #455E29;
    --emp-magenta: #B0186A;
    --emp-indigo: #4A41C0;
    --emp-cocoa: #6E4A30;
    --emp-lemon: #6E6C00;
    --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--text-1);
    --figure-weight: 600;
    --figure-tracking: 0.06em;
    color-scheme: light;
    background: var(--bg-0);
}
html[data-face="alu"] body { background: var(--bg-0); color: var(--text-1); }