/* Colour tokens — the single source of truth for colour in this app.
   Nothing outside this file should reference a raw hex value. */

:root {
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --text: #14161A;
  --text-muted: #5A6472;
  --blue: #0A3D91;
  --yellow: #FFC20E;
  --on-yellow: #14161A;
  --on-blue: #FFFFFF;
  --edge: #D8DEE9;

  /* Removing a label — the one genuinely destructive, one-step action in
     the app. Never used for "watched" or "delete a Shelf film", which both
     ask first with the yellow "commit" fill instead. */
  --danger: #B3261E;
  --on-danger: #FFFFFF;

  /* The VHS case is always black with white type, regardless of theme —
     an object colour, not a surface one. */
  --case-bg: #101012;

  /* The Year list's rank sticker is always navy digits on yellow,
     regardless of theme — same "object colour" reasoning as --case-bg. */
  --sticker-ink: #0A3D91;

  /* The Year list's printout sheet — a ledger-paper look, so these follow
     the theme rather than staying fixed like --case-bg above. */
  --greenbar: #EEF3FB;
  --feed-hole: #F4F6FA;

  /* Staff Picks' rack and index cards — physical objects, like --case-bg
     above, so they stay fixed rather than following the theme. */
  --card-stock: #FFFBEA;
  --card-tape: #E57373;
  --rack-bg: #1B1D22;
  --rack-inset: #2C3038;
  --rack-lip: #3A3F48;
  --rack-lip-edge: #6A717D;

  /* The phone Rental History list's ticket stubs. Unlike --case-bg above,
     a ticket follows the store light like any other surface. --ticket-ink
     stays fixed under every light — it's the dark navy used as ink on a
     gold fill (the ranks 1-3 podium stub, and the staff-pick sticker's
     text), never text on a light background, so the contrast rule doesn't
     apply to it. --ticket-accent is gold on the dark ticket (matching its
     other gold ink) and the app's own blue on the light one, so that role
     never ends up as yellow text on a light surface either. */
  --ticket-ink: var(--ink);
  --ticket-accent: var(--blue);
  --ticket-page-bg: var(--bg);
  --ticket-bg: #FFFFFF;
  --ticket-stub: #EEF3FB;
  --ticket-perf: #C9D2E3;
  --ticket-text: var(--text);
  --ticket-muted: var(--text-muted);
  --ticket-chip-bg: #EEF3FB;
  --ticket-sticker: #F4EFE2;
  --ticket-sticker-border: #E2D9C2;
  --ticket-hover-fill: var(--ticket-stub);

  /* Home's "STAFF PICK" rubber stamp — day value. Aliased below to a
     lighter --dark-stamp-red for dark mode, same pattern as --danger. */
  --stamp-red: #C8322B;

  /* The Year screen's Rental History receipt card, 700px+ — a printed
     receipt is an object, not a surface, same reasoning as --case-bg and
     --card-stock above, so it stays the same under every store light. */
  --receipt-bg: #FFFAF0;
  --receipt-ink: #2B2620;
  --receipt-muted: #8A8272;
  --receipt-edge: #D9D2BF;
  --receipt-pace-up: #1A7A3C;
  --receipt-pace-down: #B3261E;

  /* Contrast pair for --stamp-red used as a fill (Clerk Feedback's Miss
     stamp/button) rather than ink-on-card text, so it needs its own
     "on-" colour — --stamp-red alone never needed one before this. */
  --on-stamp-red: #FFFFFF;

  /* Your Card's counter card and door plaque (Stage 7a) — physical
     objects, like --case-bg above, so they stay the same under every
     store light rather than following it the way --blue does. Text on
     --card-navy is plain white, the same convention --case-bg's own
     text already uses throughout the app (see .vhs-case, .door-sign in
     css/app.css) rather than a new "on-" token. */
  --card-navy: #0A3D91;
  /* Small print on the sign-in card (Stage F-7a): field labels and notes
     on --card-navy, fixed like the card itself. */
  --card-navy-muted: #C3CDE6;
  --plaque-screw: #4A4E58;

  /* Your Card's back face (Stage 7b) — the punch card's magnetic stripe
     and its "authorized signatures" strip. Fixed object colours, same
     reasoning as --card-navy just above. */
  --card-stripe: #111318;
  --card-sig-a: #F4EFE2;
  --card-sig-b: #EAE3D0;

  /* Label chips, restyled as label-maker tape. The four picked colours
     are fixed object colours (real tape, like --case-bg above) — a label
     is always the same colour everywhere, chosen from its id, never from
     the theme. The unpicked tape's flat grey *does* follow the theme
     (light grey by day, muted navy by night, aliased below); the case
     back forces the dark value regardless of theme since the case itself
     is always dark, same as --card-stock's fixed reasoning. */
  --tape-red: #C8322B;
  --tape-navy: #0A3D91;
  --tape-black: #1C1C1E;
  --tape-green: #2F6B3A;
  --tape-picked-text: #F2F4F8;
  --tape-unpicked-bg: #E6EAF1;
  --dark-tape-unpicked-bg: #173A70;

  /* The Shelf's VHS case redesign (Stage 7a) — fixed object colours for
     the physical case, like --case-bg above: real plastic and paper, so
     they never follow the theme. --case-tray-bg is the recessed molded
     panel inside an open case (a shade lighter than --case-bg); the
     sticker/card colours are the two cream/tan tones a real rental box
     used for its printed labels; the reel colours are the wound-tape
     texture in the open case's cassette graphic. Ink on the sticker and
     card reuses --on-yellow, the same "guaranteed-dark" token Staff
     Picks' index card already uses on its own cream stock. */
  --case-tray-bg: #141418;
  --case-sticker-bg: #F4F1E8;
  --case-card-bg: #EFE3C2;
  --case-reel-well: #2B2B31;
  --case-reel-tape: #E6E1D4;
  --case-reel-tape-dark: #8E8E95;

  /* The open cassette's stripe print (the genre word) and the Be Kind
     Rewind sticker — printed paper on the tape itself, fixed object
     colours like the case tones above rather than following the theme. */
  --cassette-print: #F6EDD9;
  --bekind-red: #A8332E;

  /* The Staff Room's "Rewrite their bio" (Stage RB-2) — the cream
     coaching note and the two paper bio cards are physical paper, so, like
     --case-bg and --card-stock above, they stay the same under every store
     light. Ink on them is fixed too (never --text, which turns light at
     night). --note-stamp-red is the REVISED rubber stamp's ink, fixed
     rather than following the theme the way --stamp-red does, since it
     always sits on white paper. The ON FILE stamp reuses --card-navy and
     the new-bio card reuses --paper-white. */
  --note-paper: #FBF6E9;
  --note-ink: #14161A;
  --note-muted: #5A6472;
  --note-edge: #D8DEE9;
  --note-stamp-red: #B3261E;
  /* The Return Slip's Member reviews cards (Stage FN-2) reuse the note
     paper above; this is just their lighter placeholder text, fixed the
     same way since it always sits on that cream paper. */
  --note-faint: #8A93A3;

  /* A plain text link that isn't the muted back-link — "Try another take"
     under the bio comparison. The app's navy by day; yellow by night,
     where it sits on the dark background (never yellow on light). */
  --link: #0A3D91;
  --dark-link: #FFC20E;

  /* The Year Rewind screen's printable page (Stage R-3) — paper is always
     white with dark ink, whatever the store light is set to, so these are
     fixed object colours like --case-bg above rather than following the
     theme. */
  --print-ink: #14161A;
  --print-muted: #4A515C;
  --print-edge: #C9CCD3;
  --print-dash: #8A8578;

  /* The shape kit (design/shape-kit/SHAPE-KIT.md, "Tokens"). --ink is the
     kit's outline and hard-shadow colour, the same dark navy --ticket-ink
     already used. Night swaps the ink shadows to black and the focus ring
     to yellow (aliased below). */
  --ink: #0F1A3A;
  --r-paper: 2px;
  --r-key: 4px;
  --r-plastic: 6px;
  --r-card: 12px;
  --shadow-ink: 5px 5px 0 var(--ink);
  --strip-edge: var(--ink);
  --shadow-ink-sm: 3px 3px 0 var(--ink);
  --shadow-ink-md: 4px 4px 0 var(--ink);
  --shadow-key: 0 4px 0 var(--ink);
  --shadow-key-sm: 0 3px 0 var(--ink);
  --shadow-lift: 0 10px 22px rgba(0, 0, 0, 0.28);
  --tilt-case-max: 4deg;
  --tilt-sticker-max: 6deg;
  --focus-ring: 3px solid var(--blue);
  --focus-offset: 3px;

  /* Shape pass Stage 7a: folder tabs (years) and the VCR pieces — the
     List/Grid keys and the Rental History band's Rewind panel. The VCR
     colours are real plastic and LED, fixed in both themes like
     --case-bg; the unpicked folder tab follows the theme via the Night
     rules at the end of css/app.css (--dark-field / --dark-rim). */
  --folder-tab-bg: #E6EAF1;
  --vcr-housing: #1C1C1E;
  --vcr-key-bg: #2C3038;
  --vcr-key-text: #EEF2F8;
  --vcr-led-bg: #050608;
  --vcr-led: #5FF2E0;
  --vcr-led-glow: rgba(95, 242, 224, 0.8);
  /* Shape pass Stage 8a: the Showdown's landing-zone ruler — black
     plastic with an amber readout, fixed in both themes like the VCR
     pieces above. */
  --vcr-ruler: #0B0B0D;
  --vcr-tick-off: #3A3F48;
  --vcr-ruler-muted: #9FB0CC;
  --vcr-amber-glow: rgba(255, 194, 14, 0.7);
  --vcr-panel-sub: #9FA6B2;
  --vcr-title: #FFFFFF;
  --vcr-shadow: #000000;
  /* Shape pass Stage 8b: Where It Lands' clipboard (wood board, metal
     clip) and the round counter's grey label — fixed in both themes. */
  --clipboard-wood: #8F6420;
  --clip-metal-top: #C9CDD4;
  --clip-metal-bottom: #8E949E;
  --vcr-counter-label: #6A717D;
  /* Shape pass Stage 9a: the phone menu's hanging signs — the rail they
     hang from, their dotted chains, and the grey count tag. */
  --menu-rail: #4A4E58;
  --menu-chain: rgba(159, 176, 204, 0.6);
  --menu-count-bg: #E6EAF1;
  /* Shape pass Stage 10a: the Back Office's switch plates (Store lights,
     Decorations) — the grey plate, its screws, and the rocker paddle.
     Night dims the plate to --dark-plate (rules at the end of
     css/back-office.css); the switches themselves never change. */
  --plate: #E6EAF1;
  --plate-screw: #4A4E58;
  --plate-screw-slot: rgba(230, 234, 241, 0.75);
  --switch-off: #3A3F48;
  --switch-glow: rgba(255, 194, 14, 0.75);
  --dark-plate: #8C94A6;
  /* Shape pass Stage 10b: Fix a ranking's index card (red margin line,
     faint blue rules) and the Staff Room's manila personnel folder (its
     ruled lines and small print). Fixed paper colours; Night swaps the
     folder to --dark-manila via rules at the end of css/back-office.css. */
  --index-margin: #E57373;
  --index-rule: #D6E2F3;
  --manila: #EFE3C2;
  --manila-rule: #B9A77A;
  --manila-muted: #6A5A34;
  --dark-manila: #B8A77E;
  /* Shape pass Stage 10c: the Breakroom's wood frame and its letterboard
     sign. Real wood and plastic, the same in Day and Night. */
  --frame-wood: #6B4423;
  --frame-wood-inner: #5C3A1D;
  --letterboard-bg: #19191C;
  --letterboard-rim: #2C2C30;
  --letterboard-letter: #F2F4F8;

  /* Shape pass Stage 7b: the Year screen's tractor-feed printout —
     the perforation and punched-hole rim, and its blue "green bar"
     stripe. Day values; Night is handled at the end of css/app.css. */
  --tractor-perf: #C9D2E3;
  --bluebar: #EEF3FB;
  --bluebar-night: rgba(0, 0, 0, 0.06);

  /* Home's colours, moved here from css/home.css. --marquee is the sign's
     navy — the app's blue by day, the dark surface navy by night. The
     sleeves are stand-in colours for a film with no poster. The price
     sticker is a fluorescent object colour, fixed regardless of theme;
     its text reuses --on-yellow, the app's guaranteed-dark ink. */
  --marquee: #0A3D91;
  --dark-marquee: #0D2B5C;
  --sleeve-1: #7A2230;
  --sleeve-2: #2F3E52;
  --sleeve-3: #8F6420;
  --sleeve-4: #1F5C5A;
  --sleeve-5: #4B2E5A;
  --sleeve-6: #4F4F24;
  --price-sticker: #FF6B1A;

  /* The dark palette, defined once here so the two rule blocks below
     (the device default and the manual override) each just alias to it —
     that way they can never drift apart from one another. */
  --dark-bg: #071B3D;
  --dark-surface: #0D2B5C;
  --dark-text: #F2F4F8;
  --dark-text-muted: #9FB0CC;
  --dark-blue: #1B56B8;
  --dark-yellow: #FFC20E;
  --dark-on-yellow: #14161A;
  --dark-on-blue: #FFFFFF;
  --dark-edge: #173A70;
  --dark-danger: #E05C54;
  --dark-on-danger: #14161A;
  --dark-greenbar: #11336A;
  --dark-feed-hole: #071B3D;
  --dark-stamp-red: #FF7A6E;
  --dark-on-stamp-red: #14161A;

  /* The shape kit's Night ("Night mode" in SHAPE-KIT.md): ink shadows go
     black and the focus ring goes yellow. The rest are Night-only values
     for later stages — lamp-lit paper (card stock, receipts), its darker
     small print, the rim on dark objects, and fields on the page. */
  --dark-shadow-ink: 5px 5px 0 #000000;
  --dark-shadow-ink-sm: 3px 3px 0 #000000;
  --dark-shadow-ink-md: 4px 4px 0 #000000;
  --dark-shadow-key: 0 4px 0 #000000;
  --dark-shadow-key-sm: 0 3px 0 #000000;
  --dark-strip-edge: #000000;
  --dark-focus-ring: 3px solid var(--dark-yellow);
  --dark-card-stock: #BDB292;
  --dark-receipt-bg: #B9B09B;
  --dark-paper-muted: #30353F;
  --dark-receipt-muted: #4A4436;
  /* Dashed rules on paper at Night. --paper-dash is only set at Night;
     by Day each rule falls back to its own paper edge colour. */
  --dark-paper-dash: rgba(43, 38, 32, 0.35);
  --dark-rim: #34406A;
  --dark-field: #10172A;
  /* Night only: a secondary key printed on a light panel (talker, note,
     receipt) keeps its Day look, just dimmed (.key--on-paper). */
  --dark-key-on-paper: #E6E0D2;

  /* The Breakroom's corkboard, wood frames and pinned paper (Stage BR-2) —
     objects on a board, not surfaces, so they stay fixed regardless of the
     theme, same reasoning as --case-bg and --card-stock above. */
  --cork-bg: #B8895A;
  --cork-frame: #7A4F2A;
  --cork-frame-dark: #5C3A1D;
  --wood-frame: #6B4423;
  --gold-border: #C9A227;
  --pin-red: #B3261E;
  --pin-blue: #0A3D91;
  --pin-green: #1A7A3C;
  --paper-white: #FFFFFF;
  --gold-gradient-start: #D9B44A;
  --plaque-border: #8A6D12;
  --plaque-ink: #2B2208;
  --decade-bar-blue: #1E3C8F;
  --wall-highlight: #F5C542;

  /* The Year Rewind screen's VCR display (Stage R-1) — a physical
     instrument, like --case-bg above, so it stays fixed regardless of the
     theme. */
  --vcr-body: #17181C;
  --vcr-screen: #06120F;
  --vcr-screen-text: #7CF3C8;

  /* The ticket's own dark values — "keep what we have now" from before it
     followed the theme. */
  --dark-ticket-accent: #FFC20E;
  --dark-ticket-page-bg: #0F1A3A;
  --dark-ticket-bg: #1B2C5E;
  --dark-ticket-stub: #16244F;
  --dark-ticket-perf: #3A4E86;
  --dark-ticket-text: #FFFFFF;
  --dark-ticket-muted: #C3CDE6;
  --dark-ticket-chip-bg: #0F1A3A;
  --dark-ticket-sticker-border: transparent;
  --dark-ticket-hover-fill: rgba(255, 255, 255, 0.06);

  /* Head Office's license desk (Stage F-5c): the status tags on Licenses
     out and the certificate's navy key. Printed stickers and a key on
     paper, so fixed in both themes like --card-stock. */
  --tag-waiting: #FFF1B8;
  --tag-opened: #D6F0DC;
  --tag-closed: #E6EAF1;
  --cert-navy: #0A3D91;
}

/* Follows the device setting by default (Back Office's "Follow device"
   store light, or before a choice has ever been made). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper-dash: var(--dark-paper-dash);
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --text-muted: var(--dark-text-muted);
    --blue: var(--dark-blue);
    --yellow: var(--dark-yellow);
    --on-yellow: var(--dark-on-yellow);
    --on-blue: var(--dark-on-blue);
    --edge: var(--dark-edge);
    --danger: var(--dark-danger);
    --on-danger: var(--dark-on-danger);
    --greenbar: var(--dark-greenbar);
    --feed-hole: var(--dark-feed-hole);
    --stamp-red: var(--dark-stamp-red);
    --on-stamp-red: var(--dark-on-stamp-red);
    --ticket-accent: var(--dark-ticket-accent);
    --ticket-page-bg: var(--dark-ticket-page-bg);
    --ticket-bg: var(--dark-ticket-bg);
    --ticket-stub: var(--dark-ticket-stub);
    --ticket-perf: var(--dark-ticket-perf);
    --ticket-text: var(--dark-ticket-text);
    --ticket-muted: var(--dark-ticket-muted);
    --ticket-chip-bg: var(--dark-ticket-chip-bg);
    --ticket-sticker-border: var(--dark-ticket-sticker-border);
    --ticket-hover-fill: var(--dark-ticket-hover-fill);
    --tape-unpicked-bg: var(--dark-tape-unpicked-bg);
    --link: var(--dark-link);
    --marquee: var(--dark-marquee);
    --shadow-ink: var(--dark-shadow-ink);
    --shadow-ink-sm: var(--dark-shadow-ink-sm);
    --shadow-ink-md: var(--dark-shadow-ink-md);
    --shadow-key: var(--dark-shadow-key);
    --shadow-key-sm: var(--dark-shadow-key-sm);
    --strip-edge: var(--dark-strip-edge);
    --focus-ring: var(--dark-focus-ring);
  }
}

/* Manual override — Back Office's "Night" store light. */
:root[data-theme="dark"] {
  --paper-dash: var(--dark-paper-dash);
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --text: var(--dark-text);
  --text-muted: var(--dark-text-muted);
  --blue: var(--dark-blue);
  --yellow: var(--dark-yellow);
  --on-yellow: var(--dark-on-yellow);
  --on-blue: var(--dark-on-blue);
  --edge: var(--dark-edge);
  --danger: var(--dark-danger);
  --on-danger: var(--dark-on-danger);
  --greenbar: var(--dark-greenbar);
  --feed-hole: var(--dark-feed-hole);
  --stamp-red: var(--dark-stamp-red);
  --on-stamp-red: var(--dark-on-stamp-red);
  --ticket-accent: var(--dark-ticket-accent);
  --ticket-page-bg: var(--dark-ticket-page-bg);
  --ticket-bg: var(--dark-ticket-bg);
  --ticket-stub: var(--dark-ticket-stub);
  --ticket-perf: var(--dark-ticket-perf);
  --ticket-text: var(--dark-ticket-text);
  --ticket-muted: var(--dark-ticket-muted);
  --ticket-chip-bg: var(--dark-ticket-chip-bg);
  --ticket-sticker-border: var(--dark-ticket-sticker-border);
  --ticket-hover-fill: var(--dark-ticket-hover-fill);
  --tape-unpicked-bg: var(--dark-tape-unpicked-bg);
  --link: var(--dark-link);
  --marquee: var(--dark-marquee);
  --shadow-ink: var(--dark-shadow-ink);
  --shadow-ink-sm: var(--dark-shadow-ink-sm);
  --shadow-ink-md: var(--dark-shadow-ink-md);
  --shadow-key: var(--dark-shadow-key);
  --shadow-key-sm: var(--dark-shadow-key-sm);
  --strip-edge: var(--dark-strip-edge);
  --focus-ring: var(--dark-focus-ring);
}

/* Holiday decorations (js/decorations.js, css/decorations.css) — snow,
   the Halloween cobweb and its spider are objects, same reasoning as
   --case-bg, so they stay the same under every store light. The holidays'
   own bulb, wire and sticker colours are data in js/holidays.js, not
   tokens. */
:root {
  --deco-snow: #FFFFFF;
  --deco-cobweb: rgba(255, 255, 255, 0.78);
  --deco-spider: #FF7A1A;
}

/* Shape pass Stage 5a: Home's reader board. The backlit panel, its letters
   and the bulbs are lit things, so they stay the same at Night ("object
   colours", like --case-bg). --board-red is --stamp-red's Day value, held
   fixed: the Night stamp red is too light to read on the bright panel. */
:root {
  --board-panel: #FBF7EA;
  --board-panel-hot: #FFFFFF;
  --board-panel-edge: #EDE5CF;
  --board-panel-border: #1C1C1E;
  --board-panel-glow: rgba(255, 236, 170, 0.8);
  --board-groove: #CFC8B6;
  --board-ink: #141414;
  --board-red: #C8322B;
  --board-night-glow: rgba(255, 214, 140, 0.18);
  --bulb-lit: #FFE9A8;
  --bulb-off: #8A6A1E;
  --bulb-glow: rgba(255, 210, 90, 0.85);
}

/* Shape pass Stage 5b: Home's shelf units. The back panel is an object,
   so it has a fixed Day value and a fixed Night value; css/home.css picks
   between them under the same two Night selectors as everything else.
   --dark-stamp-on-paper is stamp red printed on lamp-lit paper at Night
   (the page's own --dark-stamp-red is too light for paper). */
:root {
  --shelf-back: #DCE3EE;
  --dark-shelf-back: #141B2E;
  --dark-stamp-on-paper: #8A1A15;
  --dark-case-edge: #4A5272;
  --receipt-edge-dash: #D9D2BF;
  /* Shape pass Stage 6b: the Add drawer's pull handle (a fixed object). */
  --drawer-pull: #4A4E58;
}

/* Stage F-6: Staff Picks' On break sign and its strings. An object, like
   --case-bg, so it stays the same under every store light (the page's own
   --stamp-red goes light at Night). */
:root {
  --onbreak-red: #C8322B;
  --onbreak-string: #4A4E58;
}

/* Staff Picks look pass: objects, the same under every store light — the
   clip-on name tag's metal clip, the punch card's punched-through holes
   (the colour of the counter showing through) and the On break note. */
:root {
  --tag-clip: #B7BDC8;
  --punch-through: #E6E6E8;
  --break-note-paper: #FFF3A8;
}