/* 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). The card site's Prism comes last
   (DESIGN.md, The Prism): its faces apply under :root[data-look="prism"].
   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); }

/* —— The Prism, the card site's own look (Pryce, 20 Oct 2026) ——
   The card site (SITE_PROFILE=tcg) wears a prismatic sheen after the
   prismatic augments of Riot's games, with more white glisten than their
   pink and violet: night-glass grounds like the augment's dark core, white
   light with its colours only at the edges, and chrome where the light
   lands (DESIGN.md, The Prism). The profile's look puts data-look="prism"
   on <html> (site_brand.site_look); prism.css draws the sheen. Golden Games
   never carries the attribute, so none of this reaches it.

   The grounds, lines and text stay neutral (OKLab chroma under 0.02) and
   hold every floor the house faces hold (test_house_style measures the
   four Prism faces too); the meaning, data and address colours are the
   house's own. Order matters: the Prism comes after the plate, Pearl (its
   light theme) outranks Travertine, and the Prism's plate outranks Pearl,
   so each sets every name the one under it sets. */
:root[data-look="prism"] {
    --bg-0: #090B10;          /* night glass */
    --bg-1: #0F1218;
    --bg-2: #161A21;
    --bg-3: #1F232B;
    --line: #242830;
    --line-strong: #3A3F48;
    --edge: #6C727C;          /* 4.06:1 on bg-0, 3.60:1 on bg-2 */
    --text-1: #F3F6FC;        /* 15.3:1 on bg-1, 14.4:1 on bg-3 */
    --text-2: #AAB0BB;
    --text-3: #959BA6;        /* 5.64:1 on bg-3 */
    --ink-rgb: 243 246 252;

    /* The prism family (DESIGN.md, Colour): drawn only in prism.css.
       Type: white with light tints between, 10:1 or more on every ground,
       so a title or a poster in it reads like text-1. */
    --prism-type-1: #FFFFFF;
    --prism-type-2: #A8DEFF;  /* ice */
    --prism-type-3: #D6CCFF;  /* lilac */
    --prism-type-4: #A8F2D4;  /* mint */
    --prism-type-5: #FFE3A3;  /* champagne */
    /* Light: the sheen on rules, edges and frames, silver with the same tints. */
    --prism-glint: #FFFFFF;
    --prism-glint-rgb: 255 255 255;
    /* Sparkles and the lit wash on a picked row: the glint where it shows,
       a deep ink on Pearl. */
    --prism-spark-rgb: 255 255 255;
    /* Glitter on a waiting surface (the dot field): a tile of scattered
       glints, white and ice here, the fringe's cyan and gold on Pearl and
       the plate, as on an opal. */
    --prism-glitter: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Ccircle%20cx='14'%20cy='22'%20r='1.0'%20fill='%23FFFFFF'%20opacity='0.9'/%3E%3Ccircle%20cx='57'%20cy='9'%20r='0.7'%20fill='%23D4E7FF'%20opacity='0.55'/%3E%3Ccircle%20cx='98'%20cy='31'%20r='0.9'%20fill='%23FFFFFF'%20opacity='0.75'/%3E%3Ccircle%20cx='33'%20cy='61'%20r='0.6'%20fill='%23D4E7FF'%20opacity='0.45'/%3E%3Ccircle%20cx='76'%20cy='68'%20r='1.1'%20fill='%23FFFFFF'%20opacity='0.95'/%3E%3Ccircle%20cx='111'%20cy='88'%20r='0.7'%20fill='%23D4E7FF'%20opacity='0.5'/%3E%3Ccircle%20cx='22'%20cy='103'%20r='0.8'%20fill='%23FFFFFF'%20opacity='0.7'/%3E%3Ccircle%20cx='61'%20cy='112'%20r='0.6'%20fill='%23D4E7FF'%20opacity='0.4'/%3E%3Cpath%20d='M90%20100.8C90.64%20103.36%2090.64%20103.36%2093.2%20104C90.64%20104.64%2090.64%20104.64%2090%20107.2C89.36%20104.64%2089.36%20104.64%2086.8%20104C89.36%20103.36%2089.36%20103.36%2090%20100.8Z'%20fill='%23FFFFFF'%20opacity='0.9'/%3E%3Cpath%20d='M44%2030.6C44.48%2032.52%2044.48%2032.52%2046.4%2033C44.48%2033.48%2044.48%2033.48%2044%2035.4C43.52%2033.48%2043.52%2033.48%2041.6%2033C43.52%2032.52%2043.52%2032.52%2044%2030.6Z'%20fill='%23D4E7FF'%20opacity='0.6'/%3E%3C/svg%3E");
    --prism-chrome-hi: #E9EDF5;
    --prism-chrome: #A8AFBC;
    --prism-chrome-lo: #6C727C;
    /* The fringe: where the white light splits, thin and never under words.
       No pink or violet: the white does the work the augments give them. */
    --prism-gold: #FFD98A;
    --prism-green: #9DF2C9;
    --prism-cyan: #8ED8FF;

    /* White leads: it holds half the turn and takes the place the augments
       give to pink and violet; ice, mint and champagne pass between. */
    --prism-type: linear-gradient(100deg, var(--prism-type-1) 0%, var(--prism-type-1) 8%, var(--prism-type-2) 18%,
        var(--prism-type-1) 30%, var(--prism-type-1) 46%, var(--prism-type-4) 58%, var(--prism-type-5) 70%,
        var(--prism-type-1) 82%, var(--prism-type-1) 100%);
    /* Pearl: the same turn laid across a surface (the Sale Logger's main
       key, the toast), its tints half-way to the white so the white leads. */
    --prism-pearl: linear-gradient(115deg, var(--prism-type-1) 0%,
        color-mix(in oklab, var(--prism-type-2) 55%, var(--prism-type-1)) 24%, var(--prism-type-1) 42%,
        color-mix(in oklab, var(--prism-type-5) 50%, var(--prism-type-1)) 58%, var(--prism-type-1) 72%,
        color-mix(in oklab, var(--prism-type-4) 55%, var(--prism-type-1)) 88%, var(--prism-type-1) 100%);
    /* A rule catching the light from the upper left: a glint split by the
       fringe, then silver settling into the strong rule. The stops on their
       own, so the rail's edge runs them downwards. */
    --prism-rule-stops: var(--prism-glint) 0%, var(--prism-glint) 3%, var(--prism-cyan) 8%, var(--prism-glint) 12%,
        var(--prism-gold) 17%, var(--prism-chrome) 26%, var(--prism-green) 38%, var(--prism-chrome-lo) 52%,
        var(--line-strong) 80%, var(--line-strong) 100%;
    --prism-rule: linear-gradient(90deg, var(--prism-rule-stops));
    /* The chrome edge of a key: lit on top, darker down the sides, the
       light thrown back at the foot. Its darkest stop is the edge grey. */
    --prism-edge: linear-gradient(172deg, var(--prism-chrome-hi) 0%, var(--prism-chrome) 26%, var(--prism-chrome-lo) 52%,
        var(--prism-chrome-lo) 70%, var(--prism-chrome) 100%);
    /* The ring: white across the top, where the light falls, and the fringe
       round the sides and the foot, with lilac only as a whisper there. */
    --prism-ring: conic-gradient(from 210deg, var(--prism-glint) 0deg, var(--prism-type-2) 36deg, var(--prism-cyan) 58deg,
        var(--prism-glint) 88deg, var(--prism-glint) 178deg, var(--prism-type-5) 214deg, var(--prism-gold) 234deg,
        var(--prism-glint) 264deg, var(--prism-type-4) 296deg, var(--prism-green) 314deg, var(--prism-type-3) 334deg,
        var(--prism-glint) 350deg, var(--prism-glint) 360deg);
    /* A frame of chrome bands with the tints between them, glinting at two
       corners, after the augment's frame; a white band where it has violet. */
    --prism-frame:
        linear-gradient(135deg, rgb(var(--prism-glint-rgb) / 0.95) 0%, rgb(var(--prism-glint-rgb) / 0) 14%),
        linear-gradient(315deg, rgb(var(--prism-glint-rgb) / 0.8) 0%, rgb(var(--prism-glint-rgb) / 0) 12%),
        linear-gradient(160deg, var(--prism-chrome-hi) 0%, var(--prism-chrome) 12%, var(--prism-type-2) 22%,
            var(--prism-chrome-lo) 34%, var(--prism-glint) 46%, var(--prism-chrome) 56%, var(--prism-type-4) 68%,
            var(--prism-chrome-lo) 78%, var(--prism-type-5) 88%, var(--prism-chrome-hi) 100%);
    /* The specular band laid across a lit surface. */
    --prism-sheen: linear-gradient(115deg, rgb(var(--prism-glint-rgb) / 0) 30%, rgb(var(--prism-glint-rgb) / 0.10) 44%,
        rgb(var(--prism-glint-rgb) / 0.02) 52%, rgb(var(--prism-glint-rgb) / 0) 64%);
    /* Light from above, so faint the grounds' floors still hold: white and
       ice here, two pale ices on Pearl. The aura is the two as one
       light across the top of every page and the rail, gone by the first
       section; the door has its own. The spill is the light a lit rule
       throws onto its plane. */
    --prism-light: rgb(var(--prism-glint-rgb) / 0.07);
    --prism-light-2: rgb(214 226 255 / 0.055);
    --prism-spill: rgb(var(--prism-glint-rgb) / 0.035);
    --prism-aura:
        radial-gradient(72rem 28rem at 22% -7rem, var(--prism-light), transparent 70%),
        radial-gradient(52rem 22rem at 84% -8rem, var(--prism-light-2), transparent 70%);
    /* The sparkle: four points, a shape to fill with the light. */
    --prism-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.7 7.4 16.6 11.3 24 12C16.6 12.7 12.7 16.6 12 24C11.3 16.6 7.4 12.7 0 12C7.4 11.3 11.3 7.4 12 0Z'/%3E%3C/svg%3E");
}

/* Pearl, the Prism's light theme: cool white, type in deep inks with the
   same turn of colour, chrome in silver. */
:root[data-look="prism"][data-theme="light"] {
    --bg-0: #F2F4F8;
    --bg-1: #FFFFFF;
    --bg-2: #EAEDF2;
    --bg-3: #E1E5EB;
    --line: #D6DAE2;
    --line-strong: #B3B8C2;
    --edge: #80858F;          /* 3.36:1 on bg-0, 3.16:1 on bg-2 */
    --text-1: #14161B;
    --text-2: #4F545E;
    --text-3: #5D626C;        /* 4.84:1 on bg-3 */
    --ink-rgb: 20 22 27;
    --prism-type-1: #14161B;
    --prism-type-2: #1F3A66;  /* sapphire */
    --prism-type-3: #3A2C6E;  /* violet */
    --prism-type-4: #11463E;  /* teal */
    --prism-type-5: #4F3B12;  /* old gold */
    --prism-glint: #FFFFFF;
    --prism-glint-rgb: 255 255 255;
    --prism-spark-rgb: 58 72 108;
    --prism-glitter: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Ccircle%20cx='14'%20cy='22'%20r='1.0'%20fill='%235BB4E6'%20opacity='0.9'/%3E%3Ccircle%20cx='57'%20cy='9'%20r='0.7'%20fill='%23D9AE4F'%20opacity='0.55'/%3E%3Ccircle%20cx='98'%20cy='31'%20r='0.9'%20fill='%235BB4E6'%20opacity='0.75'/%3E%3Ccircle%20cx='33'%20cy='61'%20r='0.6'%20fill='%23D9AE4F'%20opacity='0.45'/%3E%3Ccircle%20cx='76'%20cy='68'%20r='1.1'%20fill='%235BB4E6'%20opacity='0.95'/%3E%3Ccircle%20cx='111'%20cy='88'%20r='0.7'%20fill='%23D9AE4F'%20opacity='0.5'/%3E%3Ccircle%20cx='22'%20cy='103'%20r='0.8'%20fill='%235BB4E6'%20opacity='0.7'/%3E%3Ccircle%20cx='61'%20cy='112'%20r='0.6'%20fill='%23D9AE4F'%20opacity='0.4'/%3E%3Cpath%20d='M90%20100.8C90.64%20103.36%2090.64%20103.36%2093.2%20104C90.64%20104.64%2090.64%20104.64%2090%20107.2C89.36%20104.64%2089.36%20104.64%2086.8%20104C89.36%20103.36%2089.36%20103.36%2090%20100.8Z'%20fill='%235BB4E6'%20opacity='0.9'/%3E%3Cpath%20d='M44%2030.6C44.48%2032.52%2044.48%2032.52%2046.4%2033C44.48%2033.48%2044.48%2033.48%2044%2035.4C43.52%2033.48%2043.52%2033.48%2041.6%2033C43.52%2032.52%2043.52%2032.52%2044%2030.6Z'%20fill='%23D9AE4F'%20opacity='0.6'/%3E%3C/svg%3E");
    --prism-chrome-hi: #F7F8FB;
    --prism-chrome: #B9BFCA;
    --prism-chrome-lo: #80858F;
    --prism-gold: #D9AE4F;
    --prism-green: #5FC79C;
    --prism-cyan: #5BB4E6;
    --prism-rule-stops: var(--prism-chrome-lo) 0%, var(--prism-chrome-lo) 3%, var(--prism-cyan) 8%,
        var(--prism-chrome-lo) 12%, var(--prism-gold) 17%, var(--prism-chrome) 26%, var(--prism-green) 38%,
        var(--prism-chrome) 52%, var(--line-strong) 80%, var(--line-strong) 100%;
    --prism-edge: linear-gradient(var(--edge), var(--edge));
    /* The ring and the frame in the light: the white glints would vanish
       into a light ground, so silver and the edge grey run between the
       fringe and the deep inks, with the violet ink only as a whisper at
       the foot. */
    --prism-ring: conic-gradient(from 210deg, var(--prism-chrome-lo) 0deg, var(--prism-cyan) 36deg,
        var(--prism-type-2) 58deg, var(--prism-chrome-lo) 88deg, var(--prism-chrome) 133deg,
        var(--prism-chrome-lo) 178deg, var(--prism-gold) 214deg, var(--prism-type-5) 234deg,
        var(--prism-chrome-lo) 264deg, var(--prism-green) 296deg, var(--prism-type-4) 314deg,
        var(--prism-type-3) 334deg, var(--prism-chrome-lo) 350deg, var(--prism-chrome-lo) 360deg);
    --prism-frame:
        linear-gradient(135deg, rgb(var(--prism-glint-rgb) / 0.95) 0%, rgb(var(--prism-glint-rgb) / 0) 14%),
        linear-gradient(315deg, rgb(var(--prism-glint-rgb) / 0.8) 0%, rgb(var(--prism-glint-rgb) / 0) 12%),
        linear-gradient(160deg, var(--prism-chrome) 0%, var(--prism-chrome-lo) 12%, var(--prism-cyan) 22%,
            var(--prism-chrome) 34%, var(--prism-chrome-lo) 46%, var(--prism-chrome) 56%, var(--prism-green) 68%,
            var(--prism-chrome) 78%, var(--prism-gold) 88%, var(--prism-chrome-lo) 100%);
    --prism-light: rgb(214 226 255 / 0.55);
    --prism-light-2: rgb(220 236 255 / 0.5);
    --prism-spill: rgb(214 226 255 / 0.32);
    color-scheme: light;
}

/* The plate on the card site: the same aluminium, cooler, under the same
   floors. It outranks Pearl, so it sets every name Pearl sets. */
:root[data-look="prism"][data-face="alu"] {
    --bg-0: #E1E4E9;
    --bg-1: #ECEEF2;
    --bg-2: #F5F7FA;
    --bg-3: #E9ECF0;
    --line: #C7CBD2;
    --line-strong: #A7ACB5;
    --edge: #7A7F89;          /* 3.15:1 on the plate (bg-0) */
    --text-1: #14161B;
    --text-2: #4F545E;
    --text-3: #5D626C;
    --ink-rgb: 20 22 27;
    --prism-type-1: #14161B;
    --prism-type-2: #1F3A66;
    --prism-type-3: #3A2C6E;
    --prism-type-4: #11463E;
    --prism-type-5: #4F3B12;
    --prism-glint: #FFFFFF;
    --prism-glint-rgb: 255 255 255;
    --prism-spark-rgb: 58 72 108;
    --prism-glitter: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Ccircle%20cx='14'%20cy='22'%20r='1.0'%20fill='%235BB4E6'%20opacity='0.9'/%3E%3Ccircle%20cx='57'%20cy='9'%20r='0.7'%20fill='%23D9AE4F'%20opacity='0.55'/%3E%3Ccircle%20cx='98'%20cy='31'%20r='0.9'%20fill='%235BB4E6'%20opacity='0.75'/%3E%3Ccircle%20cx='33'%20cy='61'%20r='0.6'%20fill='%23D9AE4F'%20opacity='0.45'/%3E%3Ccircle%20cx='76'%20cy='68'%20r='1.1'%20fill='%235BB4E6'%20opacity='0.95'/%3E%3Ccircle%20cx='111'%20cy='88'%20r='0.7'%20fill='%23D9AE4F'%20opacity='0.5'/%3E%3Ccircle%20cx='22'%20cy='103'%20r='0.8'%20fill='%235BB4E6'%20opacity='0.7'/%3E%3Ccircle%20cx='61'%20cy='112'%20r='0.6'%20fill='%23D9AE4F'%20opacity='0.4'/%3E%3Cpath%20d='M90%20100.8C90.64%20103.36%2090.64%20103.36%2093.2%20104C90.64%20104.64%2090.64%20104.64%2090%20107.2C89.36%20104.64%2089.36%20104.64%2086.8%20104C89.36%20103.36%2089.36%20103.36%2090%20100.8Z'%20fill='%235BB4E6'%20opacity='0.9'/%3E%3Cpath%20d='M44%2030.6C44.48%2032.52%2044.48%2032.52%2046.4%2033C44.48%2033.48%2044.48%2033.48%2044%2035.4C43.52%2033.48%2043.52%2033.48%2041.6%2033C43.52%2032.52%2043.52%2032.52%2044%2030.6Z'%20fill='%23D9AE4F'%20opacity='0.6'/%3E%3C/svg%3E");
    --prism-chrome-hi: #F7F8FB;
    --prism-chrome: #B9BFCA;
    --prism-chrome-lo: #7A7F89;
    --prism-gold: #D9AE4F;
    --prism-green: #5FC79C;
    --prism-cyan: #5BB4E6;
    --prism-rule-stops: var(--prism-chrome-lo) 0%, var(--prism-chrome-lo) 3%, var(--prism-cyan) 8%,
        var(--prism-chrome-lo) 12%, var(--prism-gold) 17%, var(--prism-chrome) 26%, var(--prism-green) 38%,
        var(--prism-chrome) 52%, var(--line-strong) 80%, var(--line-strong) 100%;
    --prism-edge: linear-gradient(var(--edge), var(--edge));
    /* The ring and the frame as Pearl's. */
    --prism-ring: conic-gradient(from 210deg, var(--prism-chrome-lo) 0deg, var(--prism-cyan) 36deg,
        var(--prism-type-2) 58deg, var(--prism-chrome-lo) 88deg, var(--prism-chrome) 133deg,
        var(--prism-chrome-lo) 178deg, var(--prism-gold) 214deg, var(--prism-type-5) 234deg,
        var(--prism-chrome-lo) 264deg, var(--prism-green) 296deg, var(--prism-type-4) 314deg,
        var(--prism-type-3) 334deg, var(--prism-chrome-lo) 350deg, var(--prism-chrome-lo) 360deg);
    --prism-frame:
        linear-gradient(135deg, rgb(var(--prism-glint-rgb) / 0.95) 0%, rgb(var(--prism-glint-rgb) / 0) 14%),
        linear-gradient(315deg, rgb(var(--prism-glint-rgb) / 0.8) 0%, rgb(var(--prism-glint-rgb) / 0) 12%),
        linear-gradient(160deg, var(--prism-chrome) 0%, var(--prism-chrome-lo) 12%, var(--prism-cyan) 22%,
            var(--prism-chrome) 34%, var(--prism-chrome-lo) 46%, var(--prism-chrome) 56%, var(--prism-green) 68%,
            var(--prism-chrome) 78%, var(--prism-gold) 88%, var(--prism-chrome-lo) 100%);
    --prism-light: transparent;
    --prism-light-2: transparent;
    --prism-spill: rgb(214 226 255 / 0.28);
    color-scheme: light;
}