/* Clean: the modern theme as tokens, light and dark.
 *
 * System font, one blue accent, white or near-black surfaces with soft
 * layered shadows, 8/12/16px radii, hairline borders, calm tinted status
 * colours. The names are the contract in the clean-theme plan, section 4;
 * retro-tokens.css defines the same names for retro.
 *
 * Three blocks, chosen by the attributes theme-boot.js puts on <html>:
 *
 *   data-theme="clean"                         light (below)
 *   data-theme="clean" data-scheme="dark"      dark
 *   data-theme="clean", scheme not "light",    dark, when the system is dark
 *     under prefers-color-scheme: dark
 *
 * so data-scheme="system" (and a page with no data-scheme, such as one
 * rendered by a server that sends no script) follows the system with no
 * JavaScript at all. The two dark blocks are byte-identical, declarations
 * and indentation both; Kit's test/theme-css.test.js (darkBlocksIdentical)
 * fails if they drift. Edit one, then copy it over the other.
 *
 * Values that moved from the plan's table to clear 4.5:1 in
 * css-helpers.js's contrast(), hue kept, lightness moved:
 *   --text-faint light  #8e8e93 -> #76767b  (3.26:1 -> 4.52:1 on --surface)
 *   --text-faint dark   #6e7079 -> #898b94  (3.62:1 -> 5.27:1 on --surface,
 *                                            4.55:1 on --surface-raised)
 *   --accent-hover dark #2b7ce6 -> #1b72e4  (4.09:1 -> 4.59:1 under white
 *                                            --accent-text)
 * --segment-thumb-border is not in the plan's table: the dark thumb
 * (--surface-raised on --surface-alt) was 1.06:1, so the thumb carries a
 * 1px outline that clears 3:1 on the track in both schemes.
 * In dark, --accent (#0a66d8) is a fill, not a text colour: on --surface it
 * is 3.3:1. Text in the accent hue uses --link, or --accent-soft-text on
 * --accent-soft. */

:root[data-theme="clean"] {
  color-scheme: light;

  /* Colour */
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-alt: #f2f2f7;
  --surface-raised: #ffffff;
  --surface-highlight: transparent;
  --text: #1c1c1e;
  --text-muted: #55555a;
  --text-faint: #76767b;
  --border: #d1d1d6;
  --border-alt: #c6c6c8;
  /* New name: the segmented control's thumb outline, 3:1 on --surface-alt
     (WCAG 1.4.11), because the thumb's fill alone is about 1.1:1 on its
     track in both schemes (review F5). */
  --segment-thumb-border: #86868b;
  --accent: #0056d6;
  --accent-hover: #0049b8;
  --accent-text: #ffffff;
  --accent-soft: #e8f0fe;
  --accent-soft-text: #0b4ea2;
  --link: #0056d6;
  --focus: #0056d6;
  --danger: #d70015;
  --danger-text: #ffffff;
  --danger-soft: #fdeaea;
  --danger-soft-text: #a3121f;
  --success: #1f8a3e;
  --success-soft: #e7f7ec;
  --success-soft-text: #146c2e;
  --warning: #b38600;
  --warning-soft: #fff6da;
  --warning-soft-text: #7a5f00;
  --info: #0056d6;
  --info-soft: #e8f0fe;
  --info-soft-text: #0b4ea2;
  --toast-info-bg: var(--info-soft);
  --toast-info-fg: var(--info-soft-text);
  --toast-success-bg: var(--success-soft);
  --toast-success-fg: var(--success-soft-text);
  --toast-error-bg: var(--danger-soft);
  --toast-error-fg: var(--danger-soft-text);
  --scrim: rgba(0, 0, 0, 0.35);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent);

  /* Shape, space, type */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.7rem;
  --weight-medium: 500;
  --weight-semibold: 600;
  --control-h: 44px;
}

/* Dark, chosen. Keep byte-identical to the block under the media query. */
:root[data-theme="clean"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0c0d12;
  --surface: #16171d;
  --surface-alt: #1f2028;
  --surface-raised: #23242c;
  --surface-highlight: rgba(255, 255, 255, 0.06);
  --text: #f2f2f5;
  --text-muted: #a0a3ad;
  --text-faint: #898b94;
  --border: #2c2d36;
  --border-alt: #3a3b45;
  --segment-thumb-border: #74767f;
  --accent: #0a66d8;
  --accent-hover: #1b72e4;
  --accent-text: #ffffff;
  --accent-soft: #0f2a52;
  --accent-soft-text: #b8d8ff;
  --link: #64a9ff;
  --focus: #64a9ff;
  --danger: #d0182b;
  --danger-text: #ffffff;
  --danger-soft: #3a0d12;
  --danger-soft-text: #ffb3b8;
  --success: #3fbf66;
  --success-soft: #0d2b16;
  --success-soft-text: #9fe6b4;
  --warning: #e0b030;
  --warning-soft: #3a3210;
  --warning-soft-text: #ffe08a;
  --info: #64a9ff;
  --info-soft: #0b2545;
  --info-soft-text: #b8d8ff;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--surface-highlight);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--surface-highlight);
  --shadow-3: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--surface-highlight);
}

/* Dark, from the system while the scheme is "system" (or unset). */
@media (prefers-color-scheme: dark) {
:root[data-theme="clean"]:not([data-scheme="light"]) {
  color-scheme: dark;
  --bg: #0c0d12;
  --surface: #16171d;
  --surface-alt: #1f2028;
  --surface-raised: #23242c;
  --surface-highlight: rgba(255, 255, 255, 0.06);
  --text: #f2f2f5;
  --text-muted: #a0a3ad;
  --text-faint: #898b94;
  --border: #2c2d36;
  --border-alt: #3a3b45;
  --segment-thumb-border: #74767f;
  --accent: #0a66d8;
  --accent-hover: #1b72e4;
  --accent-text: #ffffff;
  --accent-soft: #0f2a52;
  --accent-soft-text: #b8d8ff;
  --link: #64a9ff;
  --focus: #64a9ff;
  --danger: #d0182b;
  --danger-text: #ffffff;
  --danger-soft: #3a0d12;
  --danger-soft-text: #ffb3b8;
  --success: #3fbf66;
  --success-soft: #0d2b16;
  --success-soft-text: #9fe6b4;
  --warning: #e0b030;
  --warning-soft: #3a3210;
  --warning-soft-text: #ffe08a;
  --info: #64a9ff;
  --info-soft: #0b2545;
  --info-soft-text: #b8d8ff;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--surface-highlight);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--surface-highlight);
  --shadow-3: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--surface-highlight);
}
}