/*
 * ICR Core, dark theme (#658). Loaded after tokens.css by layouts/prototype.blade.php, and by layouts/help.blade.php
 * when features.help_dark is on (#512). Every rule matches only html[data-theme="dark"], so the light render of every
 * page is unchanged: the prototype tag's switch and the help footer's Appearance switch set the attribute
 * (Light / Dark / System, ?theme=dark|light|system).
 *
 * 1. --icr-light-*: a snapshot of the light colour tokens. A page's dark-context rules (sections already dark in the
 *    light design: ash bands, photo stages, red buttons) re-declare the colour tokens from these, so they look and
 *    read exactly as in light; their own sheet carries those rules (a generated block at its end, from
 *    scripts/prototype-themes/dark.py).
 * 2. The dark values, designed rather than inverted: a warm near-black ground on the ink hue, three surface steps,
 *    text at 16.8 / 12.8 / 8.1 / 6.4:1 on the ground, brand red for text lifted to the 5.9:1 tint already used on ink.
 * 3. Button red: a red fill has to keep 3:1 against a dark ground (WCAG 1.4.11) and 4.5:1 under white text; no
 *    single red does both that and 4.5:1 as text, so a red-filled control gets --icr-dark-button-red (5.0:1 under
 *    white, 3.7:1 on the ground, 3.3:1 on ink).
 */
:root {
  --icr-light-white: #FFFFFF;
  --icr-light-ink-900: #231F20;
  --icr-light-ink-700: #3A3A3A;
  --icr-light-ink-500: #626362;
  --icr-light-ink-400: #767676;
  --icr-light-line: #CCCCCC;
  --icr-light-surface: #F4F4F4;
  --icr-light-surface-2: #EAEAEA;
  --icr-light-line-subtle: rgba(35, 31, 32, .10);
  --icr-light-red-50: #FBEAEA;
  --icr-light-red-300: #FF6B6E;
  --icr-light-warning: #B26B00;
  --icr-light-warning-ink: #945900;
  --icr-light-success: #1E7D45;
  --icr-light-info: #1F5FA8;
  --icr-light-highlight: #FFEE9E;
  --icr-dark-button-red: #D7262B;
  --icr-dark-button-red-hover: #CF2429;
  --icr-dark-plate: #F4F4F4;      /* behind cut-out products, logos and marks in dark */
  /* the dark values once more, for a light section inside a dark-context element (see the generated blocks) */
  --icr-dark-white: #151213;
  --icr-dark-ink-900: #F5F3F3;
  --icr-dark-ink-700: #D9D5D6;
  --icr-dark-ink-500: #B0AAAB;
  --icr-dark-ink-400: #9C9697;
  --icr-dark-line: #5A5254;
  --icr-dark-surface: #1F1B1C;
  --icr-dark-surface-2: #2A2526;
  --icr-dark-line-subtle: rgba(255, 255, 255, .12);
  --icr-dark-red-50: #3B1F21;
  --icr-dark-red-300: #FF6B6E;
  --icr-dark-warning: #F2A33A;
  --icr-dark-warning-ink: #F2A33A;
  --icr-dark-red-600: #FF6B6E;
  --icr-dark-red-700: #FF8C8E;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --icr-white: #151213;           /* the page ground */
  --icr-surface: #1F1B1C;
  --icr-surface-2: #2A2526;
  --icr-line: #5A5254;
  --icr-line-subtle: rgba(255, 255, 255, .12);
  --icr-ink-900: #F5F3F3;         /* headings, 16.8:1 on the ground */
  --icr-ink-700: #D9D5D6;         /* text, 12.8:1 */
  --icr-ink-500: #B0AAAB;         /* muted, 8.1:1 */
  --icr-ink-400: #9C9697;         /* subtle, 6.4:1; 5.2:1 on surface-2 */
  --icr-red-600: #FF6B6E;         /* red as text and links, 6.7:1 */
  --icr-red-700: #FF8C8E;         /* its hover */
  --icr-red-300: #FF6B6E;
  --icr-red-50: #3B1F21;          /* the red tint behind notices, 10.3:1 under text */
  --icr-highlight: #5C4A00;
  --icr-scrim: rgba(0, 0, 0, .82);
  --icr-success: #5CC98A;
  --icr-warning: #F2A33A;
  --icr-warning-ink: #F2A33A;    /* warning as text: the dark amber already reads at 4.5:1 or more */
  --icr-info: #86B4F0;
  --icr-shadow-1: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .45);
  --icr-shadow-2: 0 8px 24px rgba(0, 0, 0, .6);
  --icr-focus-color: #FF6B6E;
  --icr-focus-halo: rgba(255, 107, 110, .35);
}
:where(html[data-theme="dark"]) body { background-color: var(--icr-white); color: var(--icr-ink-700); }

/* Images in dark (#658). Photography stays as it is. The dark wordmarks swap to their white versions, which the
   prototypes already use on dark headers (never an inverted logo). Cut-out products and the marks of press
   outlets, partners and award issuers sit on a light plate, as they do on the light pages' white cards. */
html[data-theme="dark"] img[src$="/logo-6f8ea3.svg"] { content: url("/images/prototypes/b/logo-red-white-6f8f26.svg"); }
html[data-theme="dark"] img[src$="/logo-bunker.svg"] { content: url("/images/prototypes/bunker/logo-bunker-white.svg"); }
html[data-theme="dark"] :is(img[src*="/type-"], img[src*="/press-"], img[src*="/gateway"], img[src*="/cover-"], img[src*="/partners/logo-"], img[src*="/issuer-"], img[src*="/series/"]) {
  background-color: var(--icr-dark-plate);
  border-radius: var(--icr-radius-sm);
}