/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ELEPHOUSE: Type & Space Tokens
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   One Utopia config drives every size and every space. Both scales
   below are its output, pasted verbatim. Never hand-edit a clamp:
   change the config, regenerate, paste.

     https://utopia.fyi/type/calculator?c=360,16,1.125,1060,18,1.2,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12
     https://utopia.fyi/space/calculator?c=360,16,1.125,1060,18,1.2,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,

   Blocks never write a raw length. Pick the nearest step at 1060px.
   Allowed outside this file: em/ch/% (relative by design) and optical
   nudges of 3px or less.

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* ── Type Scale ────────────────────────────────────────────────
     Utopia steps -2…6, plus step 9 for the hero. Body is step 0.

     ┌──────────────┬──────┬───────────┬────────────┐
     │ Token        │ Step │ Min (360) │ Max (1060) │
     ├──────────────┼──────┼───────────┼────────────┤
     │ --text-xs    │  -2  │  12.6px   │   12.5px   │
     │ --text-sm    │  -1  │  14.2px   │   15px     │
     │ --text-base  │   0  │  16px     │   18px     │
     │ --text-md    │   1  │  18px     │   21.6px   │
     │ --text-lg    │   2  │  20.3px   │   25.9px   │
     │ --text-xl    │   3  │  22.8px   │   31.1px   │
     │ --text-2xl   │   4  │  25.6px   │   37.3px   │
     │ --text-3xl   │   5  │  28.8px   │   44.8px   │
     │ --text-4xl   │   6  │  32.4px   │   53.7px   │
     │ --text-hero  │   9  │  46.2px   │   92.9px   │
     └──────────────┴──────┴───────────┴────────────┘
  ────────────────────────────────────────────────────────────── */
  --text-xs: clamp(0.7813rem, 0.7947rem + -0.0203vw, 0.7901rem); /* step -2 · labels, badges, notices */
  --text-sm: clamp(0.8889rem, 0.8639rem + 0.1111vw, 0.9375rem); /* step -1 · buttons, nav, footer, small UI */
  --text-base: clamp(1rem, 0.9357rem + 0.2857vw, 1.125rem); /* step 0 · body */
  --text-md: clamp(1.125rem, 1.0093rem + 0.5143vw, 1.35rem); /* step 1 · h4, lead, handwritten notes */
  --text-lg: clamp(1.2656rem, 1.0834rem + 0.81vw, 1.62rem); /* step 2 · h3, prices, crossed list */
  --text-xl: clamp(1.4238rem, 1.1563rem + 1.189vw, 1.944rem); /* step 3 · h2, signature */
  --text-2xl: clamp(1.6018rem, 1.2259rem + 1.6708vw, 2.3328rem); /* step 4 */
  --text-3xl: clamp(1.802rem, 1.2891rem + 2.2796vw, 2.7994rem); /* step 5 · landing h2, settings h1, price figure */
  --text-4xl: clamp(2.0273rem, 1.3423rem + 3.0444vw, 3.3592rem); /* step 6 · closing CTA heading */
  --text-hero: clamp(2.8865rem, 1.3857rem + 6.6703vw, 5.8048rem); /* step 9 · every page h1 */

  /* ── Space Scale ───────────────────────────────────────────────

     ┌──────────────┬───────────┬────────────┐
     │ Token        │ Min (360) │ Max (1060) │
     ├──────────────┼───────────┼────────────┤
     │ --space-3xs  │    4px    │     5px    │
     │ --space-2xs  │    8px    │     9px    │
     │ --space-xs   │   12px    │    14px    │
     │ --space-s    │   16px    │    18px    │
     │ --space-m    │   24px    │    27px    │
     │ --space-l    │   32px    │    36px    │
     │ --space-xl   │   48px    │    54px    │
     │ --space-2xl  │   64px    │    72px    │
     │ --space-3xl  │   96px    │   108px    │
     └──────────────┴───────────┴────────────┘

     Snapping a px value: nearest max, ties go up. ≤6 3xs, 7-11 2xs,
     12-15 xs, 16-22 s, 23-31 m, 32-44 l, 45-62 xl, 63-89 2xl, 90+ 3xl.
  ────────────────────────────────────────────────────────────── */
  --space-3xs: clamp(0.25rem, 0.2179rem + 0.1429vw, 0.3125rem); /*  4px →   5px */
  --space-2xs: clamp(0.5rem, 0.4679rem + 0.1429vw, 0.5625rem); /*  8px →   9px */
  --space-xs: clamp(0.75rem, 0.6857rem + 0.2857vw, 0.875rem); /* 12px →  14px */
  --space-s: clamp(1rem, 0.9357rem + 0.2857vw, 1.125rem); /* 16px →  18px */
  --space-m: clamp(1.5rem, 1.4036rem + 0.4286vw, 1.6875rem); /* 24px →  27px */
  --space-l: clamp(2rem, 1.8714rem + 0.5714vw, 2.25rem); /* 32px →  36px */
  --space-xl: clamp(3rem, 2.8071rem + 0.8571vw, 3.375rem); /* 48px →  54px */
  --space-2xl: clamp(4rem, 3.7429rem + 1.1429vw, 4.5rem); /* 64px →  72px */
  --space-3xl: clamp(6rem, 5.6143rem + 1.7143vw, 6.75rem); /* 96px → 108px */

  /* ── Space Pairs ───────────────────────────────────────────────
     Utopia one-up pairs: min of the first step, max of the second.
     Only the pairs in use are emitted. */
  --space-s-m: clamp(1rem, 0.6464rem + 1.5714vw, 1.6875rem); /* 16px →  27px · page gutter, section flow */
  --space-m-l: clamp(1.5rem, 1.1143rem + 1.7143vw, 2.25rem); /* 24px →  36px · section block-end */
  --space-xl-2xl: clamp(3rem, 2.2286rem + 3.4286vw, 4.5rem); /* 48px →  72px · hero CTA → demo */
  --space-2xl-3xl: clamp(4rem, 2.5857rem + 6.2857vw, 6.75rem); /* 64px → 108px · section block-start */

  /* ━━━ PALETTE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Every literal below is lifted from docs/brand/elephouse-redesign.html.
     The redesign token it came from is named in each comment.

     Exactly three values are DERIVED, because the app has elements the
     redesign has no counterpart for: --paper-2 (raised surfaces — the
     redesign has no cards), --ink-5 (a fifth ghost step — its ink ramp
     stops at four) and --warn-deep (a pressed state — its buttons don't
     recolour). All three are written as a color-mix of redesign values, so
     no hex here was hand-picked. Ratios are measured against --paper.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* ── Brand Color Scale ────────────────────────────────────────
      The redesign splits its red in two and the split is load-bearing:

        --brand       4.61:1  AA  — every red that is TEXT or a solid fill
        --brand-light 3.54:1  large/decorative ONLY — strokes, rules, marks

      Reaching for --brand-light on small text is the one way to break this
      palette's accessibility. Use --color-decorative, which names the limit.
   */
  --brand: #c4451a; /* redesign --red-btn / --red-text · 4.61:1 · fills AND red text */
  --brand-light: #e05520; /* redesign --red · 3.54:1 · decorative strokes only */
  --brand-mid: var(--brand-light); /* alias: the OG/icon generators read this name */
  --brand-bright: #ff7a45; /* redesign dark --red · 7.31:1 on --ink-deep */

  /* Brand alpha scale. --brand-soft is the redesign's --red-soft verbatim;
     the tint steps keep this system's existing 0.18 → 0.03 opacities. */
  --brand-soft: rgba(224, 85, 32, 0.55); /* redesign --red-soft · the margin rule */
  --brand-border: rgba(196, 69, 26, 0.18); /* subtle borders: notice, footer top */
  --brand-tint: rgba(196, 69, 26, 0.1); /* bg tints: today badge, live badge */
  --brand-pale: rgba(196, 69, 26, 0.07); /* light bg fills: notice bg */
  --brand-pale-light: rgba(196, 69, 26, 0.03); /* faintest hover: task-row, demo-row */
  --brand-bright-pale: rgba(255, 122, 69, 0.15); /* tinted bg on dark surfaces */

  /* ── Marker Highlight ─────────────────────────────────────────
     The drawn highlighter behind headline fragments and the beta note.
     Also drives ::selection, so selecting text feels like the same pen. */
  --mark: #efe97a; /* redesign --mark · ink on mark = 12.51:1 */
  --mark-ink: #26221b; /* redesign --mark-ink */

  /* ── Paper Scale ────────────────────────────────────────────── */
  --paper: #f8f6f1; /* redesign --paper · page bg, ink on red fills */
  --paper-2: color-mix(in srgb, var(--paper) 55%, var(--paper-3)); /* DERIVED · raised surface (redesign has no cards) */
  --paper-3: #e7e4db; /* redesign --grid · badge bg, ruled lines */
  --paper-4: #d6d2c7; /* redesign --dot · the dot grid */

  /* Paper transparency — only for effects that require true alpha */
  --paper-glass: rgba(248, 246, 241, 0.88); /* redesign nav: paper at 88% */

  /* ── Ink Scale ──────────────────────────────────────────────── */
  --ink-deep: #15100c; /* redesign dark --paper · dark-mode page floor */
  --ink: #26221b; /* redesign --ink · 14.65:1 */
  --ink-2: #46413a; /* redesign --body-text · 9.36:1 */
  --ink-3: #56524a; /* redesign --muted · 7.20:1 */
  --ink-4: #6b6559; /* redesign --pencil · 5.36:1 (their own AA fix) */
  --ink-5: color-mix(in srgb, var(--ink-4) 55%, var(--paper)); /* DERIVED · decorative only: checkbox borders, dots */

  /* ── Notebook Surface ─────────────────────────────────────────
     The dot grid painted on <body>. --dot is its own token because in dark
     mode the redesign gives it a distinct value (#2c2318), not --paper-4. */
  --dot: #d6d2c7; /* redesign --dot */
  --grid-cell: 30px; /* redesign --cell */

  /* ── Functional Colors ────────────────────────────────────────
     The redesign has exactly one functional colour: the red it already uses
     for the brand. Overdue is told apart by SHAPE, not hue — solid fill for
     today, outline for upcoming, red outline for overdue. That is why there
     is no gold here any more: the old #b8860b had no counterpart in the
     redesign and failed AA for badge text at 3.01:1 anyway. */
  --warn: var(--brand); /* overdue text, destructive actions */
  --warn-deep: color-mix(in srgb, var(--brand) 80%, #000); /* DERIVED · pressed state on destructive actions */
  --warn-tint: rgba(196, 69, 26, 0.08); /* bg tint: overdue badge */

  /* ── Typography Stacks ──────────────────────────────────────
     --font-label carries the small uppercase/tracked type (nav links, badges,
     buttons, captions) that used to be set in a monospace. --font-mono is now
     reserved for what actually needs fixed advance widths: code, kbd, pre.
   */
  --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-label: "Barlow", system-ui, sans-serif;
  --font-hand: "Caveat", ui-rounded, cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Letter Spacing ────────────────────────────────────────── */
  --tracking-tight: -0.02em; /* headlines, display type */
  --tracking-wide: 0.05em; /* product labels, metadata, notices */
  --tracking-wider: 0.1em; /* uppercase labels, eyebrows, signature role */

  /* ── Line Height ───────────────────────────────────────────── */
  --leading: 1.6; /* redesign body */
  --leading-none: 1; /* single-line: tags, icons, pricing-amount */
  --leading-tight: 1.15; /* section headings */
  --leading-display: 1.02; /* the hero h1. Tighter than the font's content area
     on purpose: it is what lets the .mark highlight bleed into the line above,
     which mark.css depends on. Do not relax it without reading that comment. */
  --leading-snug: 1.4; /* tight prose: form fields, principle, choice */

  /* ── Font Weight ─────────────────────────────────────────────── */
  --weight-normal: 400; /* body default, reset override for headings */
  --weight-medium: 500; /* form labels */
  --weight-semi: 600; /* strong tags */
  --weight-bold: 700; /* headings, brand wordmark, dt — Barlow Semi Condensed has a real 700 */

  /* ── Border Radius ─────────────────────────────────────────── */
  --radius-s: 3px; /* buttons, checkboxes, rows, drawn strokes */
  --radius-m: 6px; /* dialogs, cards, screenshots */
  --radius-full: 9999px; /* pill shape: badges, range input */

  /* ── Overlay ───────────────────────────────────────────────── */
  --overlay: rgba(0, 0, 0, 0.5); /* dialog backdrop */

  /* ── Strokes ───────────────────────────────────────────────── */
  --stroke-s: 1px; /* hairline dividers: nav, footer, row focus */
  --stroke-m: 2px; /* drawn outlines: inputs, buttons, badges, checkbox, rules */
  --stroke-l: 2.5px; /* marker strokes: strike-throughs, focus outline */
  --border-style: solid; /* default border style: all borders */

  /* ── Shadow ──────────────────────────────────────────────────
     Two unrelated systems. The soft trio is UI elevation (sticky search bar,
     task form). The hard pair is the redesign's drawn offset under buttons —
     no blur, full opacity, it reads as ink on paper rather than as light. */
  --shadow: 0 1px 3px var(--color-border-strong); /* default soft elevation (lit from above) */
  --shadow-bottom: 0 2px 2px -2px var(--color-border-strong); /* bottom edge only: negative spread clips the sides */
  --shadow-top: 0 -2px 2px -2px var(--color-border-strong); /* top edge only */

  --shadow-hard: 2.5px 2.5px 0 var(--color-shadow-hard); /* redesign .cta */
  --shadow-hard-lg: 3.5px 3.5px 0 var(--color-shadow-hard); /* redesign .hero-ctas .cta */
  --shadow-hard-pressed: 1px 1px 0 var(--color-shadow-hard); /* redesign .cta:hover */

  /* ── Icons ─────────────────────────────────────────────────── */
  --icon-size: 1em; /* svg default size — override per component */

  /* Icon masks. A pseudo-element cannot hold an <svg>, and content:url()
     paints the file's own colour instead of inheriting. Masking a background
     keeps these tintable from the token layer. Sources: docs/icons.md */
  --icon-check: url("/assets/icons/check-f8a22875.svg");
  --icon-dot: url("/assets/icons/dot-a3fbc924.svg");

  /* ── Composition Defaults ────────────────────────────────────────
     Configuration for Every Layout compositions.
   ────────────────────────────────────────────────────────────── */

  /* Flow (Stack) — vertical spacing between siblings */
  --flow-space: var(--space-s);

  /* Cluster — wrapping flex group (tags, buttons, nav) */
  --cluster-space: var(--space-s);
  --cluster-justify: flex-start;
  --cluster-align: center;

  /* Repel — space-between row (nav bars, header rows) */
  --repel-direction: row;
  --repel-vertical-alignment: center;
  --repel-gap: var(--space-s);

  /* Grid — auto-responsive grid (no breakpoints) */
  --grid-min-size: 16rem;
  --grid-gap: var(--space-s);

  /* Box — padded container */
  --box-padding: var(--space-s);
  --box-border-width: 0;
  --box-border-color: currentColor;
  --box-color: inherit;
  --box-background: transparent;

  /* Cover — vertically centered hero/splash */
  --cover-min-height: 100dvh;
  --cover-space: var(--space-s);

  /* Center — horizontally centered with max-width */
  --center-measure: var(--measure);
  --center-padding: var(--space-s);

  /* Wrapper — page-level container */
  --wrapper-max-width: var(--max);
  --wrapper-padding-inline: var(--col);

  /* ── Links ─────────────────────────────────────────────────── */
  --link-decoration: underline; /* default link decoration — set to none in nav contexts */

  /* ── Form Controls ─────────────────────────────────────────── */
  --form-control-height: var(--space-l); /* inputs, textarea, color input */
  --form-control-toggle-size: var(--space-m); /* checkbox, radio, create plus */

  /* ── Measure ───────────────────────────────────────────────────
     Readable line length. In ch, so it follows the element's own type. */
  --measure-narrow: 35ch; /* prose headings */
  --measure: 60ch; /* prose paragraphs, changelog intro */

  /* ── Layout ────────────────────────────────────────────────── */
  --max: 66.25rem; /* redesign sheet/nav/footer are all 1060px wide */
  --col: var(--space-s-m); /* page gutter: 16px → 27px, spec 16 / 28 */
  --column: 40rem; /* the writing column: sections, roadmap */
  --column-narrow: 35rem; /* large-type blocks: principle, testimonial, roadmap note */

  /* ── Semantic Color Mappings ─────────────────────────────────────
     1:1 mapping from design tokens to semantic role names.
     Every block and utility should use these instead of raw tokens.
     Dark mode = rewire these to different raw tokens.
     Theming = copy this file and change the mappings.
  ────────────────────────────────────────────────────────────── */

  /* Text */
  --color-text: var(--ink); /* body, headlines, strong, nav-brand, pricing-amount */
  --color-text-prose: var(--ink-2); /* paragraphs, quotes, list items, task-title */
  --color-text-muted: var(--ink-3); /* nav-links, descriptions, periods, nav-icon */
  --color-text-faint: var(--ink-4); /* hashtags, captions, placeholders, arrows, cite, footer-made on dark */
  --color-text-ghost: var(--ink-5); /* checkbox border, screenshot dots, footer links on dark, featured labels on dark */

  /* Surfaces */
  --color-bg: var(--paper); /* page bg, card bg, input bg */
  --color-bg-raised: var(--paper-2); /* hover bg, bars, alternate sections, code bg */
  --color-bg-muted: var(--paper-3); /* badge bg (planned) */
  --color-bg-glass: var(--paper-glass); /* frosted nav (needs true alpha for backdrop-filter) */

  /* Brand / Accent
     --color-accent used to point at --brand-light. It must not: --brand-light
     is the 3.54:1 decorative red, and --color-accent feeds links, labels and
     eyebrows, all of which are small text. It points at --brand (4.61:1) now.
     Decorative red has its own name below, --color-decorative. */
  --color-primary: var(--brand); /* primary fills: buttons, indicator, checkbox */
  --color-primary-hover: var(--brand); /* unchanged hue: the redesign's buttons move, they don't recolour */
  --color-accent: var(--brand); /* links, labels, eyebrows — SMALL TEXT, needs AA */
  --color-accent-muted: var(--brand); /* ghost button text — also small text */

  /* Decorative red — the 3.54:1 one. Strokes, rules, struck-through lines,
     the margin rule, focus outlines. Never small text. */
  --color-decorative: var(--brand-light);

  /* Brand alpha — tinted overlays on light surfaces */
  --color-accent-border: var(--brand-soft); /* visible brand borders: ghost button, pricing CTA */
  --color-accent-border-subtle: var(--brand-border); /* subtle brand borders: notice, footer top */
  --color-accent-tint: var(--brand-tint); /* bg tints: tag-today, status-live, accent badge, quote mark */
  --color-accent-tint-light: var(--brand-pale); /* light fills: notice bg */
  --color-accent-hover: var(--brand-pale); /* 0.07, so the row still reads on the notebook dot grid */

  /* Brand on dark — bright accent for dark surfaces */
  --color-accent-bright: var(--brand-bright); /* text on dark: featured labels, arrows, badge text on dark */
  --color-accent-bright-tint: var(--brand-bright-pale); /* tinted bg on dark: featured save badge */

  /* Ink on brand-red surfaces — stays light in BOTH themes, because the red
     islands (buttons, indicator, checkbox) never flip. --paper on --brand is
     4.61:1. Replaces the old habit of borrowing --color-bg for this. */
  --color-on-primary: var(--paper); /* button text, indicator, checkmark */
  --color-on-primary-muted: var(--paper-3); /* secondary ink on a red fill */
  --color-on-primary-faint: var(--paper-4); /* faintest ink on a red fill */

  /* Strong brand foreground that must read on the page/tints in BOTH themes:
     thin decorative marks AND brand-coloured text. --brand in light;
     brightens to the coral in dark so it stays legible. Use this — not
     --color-primary, which is a fill — whenever brand colour is foreground. */
  --color-accent-strong: var(--brand); /* decorative: quote rule, caret · text: today badge, outlined/ghost buttons, notice */

  /* Marker highlight + the hard offset shadow under buttons */
  --color-mark: var(--mark);
  --color-mark-ink: var(--mark-ink);
  --color-shadow-hard: var(--ink); /* redesign --shadow */

  /* Borders */
  /* Derived from the live text colour so borders stay visible in any theme.
     Light output is byte-identical to the old --rule rgba values; in dark,
     --color-text flips to cream, so the borders flip with it for free. */
  --color-border: color-mix(in srgb, var(--color-text) 12%, transparent); /* standard dividers: sections, inputs, grids, hr */
  --color-border-light: color-mix(in srgb, var(--color-text) 8%, transparent); /* lighter: testimonial cards */
  --color-border-strong: color-mix(in srgb, var(--color-text) 20%, transparent);

  /* Functional */
  --color-danger: var(--warn); /* error/overdue text */
  --color-danger-hover: var(--warn-deep); /* destructive action hover */
  --color-danger-tint: var(--warn-tint); /* error/overdue badge bg */

  /* "Upcoming / in progress". The redesign draws this as a plain outline
     rather than giving it a hue of its own, so these map to the ink ramp.
     Phase 3's badge rewrite expresses the difference through border + fill. */
  --color-attention: var(--color-text); /* in-progress/soon text */
  --color-attention-tint: transparent; /* in-progress/soon badge bg */

  /* Interactive */
  --color-link: var(--brand); /* default link color — 4.61:1 */
  --color-link-hover: var(--ink); /* link hover */
  --color-focus: var(--brand-light); /* redesign: 2.5px solid --red outline */
  --color-focus-border: var(--brand); /* redesign: input focus border --red-text */
  --color-focus-ring: color-mix(in srgb, var(--color-accent) 8%, transparent); /* input focus glow — tracks accent, flips in dark */
  --color-selection-bg: var(--color-mark); /* selection uses the same pen as the highlighter */
  --color-selection-fg: var(--color-mark-ink);
  --color-placeholder: var(--ink-4); /* input placeholder text */
  --color-placeholder-opacity: 0.5; /* placeholder additional dimming */
  --color-overlay: var(--overlay); /* dialog backdrop */

  /* Typography */
  --heading-font-family: var(--font-display);
  --form-control-font-family: inherit;

  /* Button */
  --button-display: inline-block;
  --button-font-family: var(--font-label);
  --button-font-size: var(--text-sm);
  --button-font-weight: var(--weight-semi);
  --button-line-height: var(--leading-none);
  --button-letter-spacing: 0;
  --button-padding: var(--space-2xs) var(--space-s); /* spec .cta 10px 20px, snapped */
  --button-border-radius: var(--radius-s);
  --button-border-width: 0; /* spec .cta is fill only; a 2px border enlarges the box */
  --button-border-color: var(--color-primary);
  --button-background-color: var(--color-primary);
  --button-color: var(--color-on-primary);
  --button-hover-background-color: var(--color-accent);
  --button-width: unset;

  /* Badge — the redesign's date chip: a pill, not a rounded rectangle */
  --badge-font-family: var(--font-label);
  --badge-font-size: var(--text-xs); /* spec .chip 0.85rem, snapped */
  --badge-font-weight: var(--weight-semi);
  --badge-letter-spacing: normal;
  --badge-line-height: var(--leading);
  --badge-padding: 1px var(--space-2xs); /* spec .chip 1px 8px */
  --badge-border-radius: var(--radius-full);
  --badge-background-color: transparent;
  --badge-border-color: var(--color-text);
  --badge-color: var(--color-text);

  /* Notice */
  --notice-font-family: var(--font-label);
  --notice-font-size: var(--text-xs);
  --notice-letter-spacing: var(--tracking-wide);
  --notice-padding: var(--space-2xs) var(--space-s);
  --notice-gap: var(--space-2xs);
  --notice-border-radius: var(--radius-s);
  --notice-background-color: var(--color-accent-tint-light);
  --notice-border-color: var(--color-accent-border-subtle);
  --notice-color: var(--color-accent-strong);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DARK MODE — rewire the semantic layer

   Every literal here is the redesign's own dark block
   (docs/brand/elephouse-redesign.html, @media prefers-color-scheme: dark).
   The previous strategy of reusing the light ramps crosswise is gone: the
   redesign specifies real dark values, so they are used directly.

   Note --color-primary does NOT brighten. The redesign holds --red-btn at
   #c4451a in both themes so the button fill is the same object on both
   backgrounds; only foreground red (--color-accent-strong) lifts to coral.

   System-only for now. To add a manual toggle later, copy these declarations
   under :root[data-theme="dark"] (values unchanged).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces — redesign dark --paper / --grid */
    --color-bg: var(--ink-deep); /* #15100c deep warm page floor */
    --color-bg-raised: #2a2118; /* redesign dark --grid */
    --color-bg-muted: #2a2118; /* chips/badges sit on the same raised tone */
    --color-bg-glass: color-mix(in srgb, var(--ink-deep) 88%, transparent); /* frosted nav */

    /* The dot grid gets its own dark value; it must not track --paper-4 */
    --dot: #2c2318; /* redesign dark --dot */

    /* Text — redesign dark --ink / --body-text / --muted / --pencil */
    --color-text: #f2ede3; /* 16.20:1 */
    --color-text-prose: #d8d1c4; /* 12.45:1 */
    --color-text-muted: #c3bcaf; /* 10.02:1 */
    --color-text-faint: #a9a192; /* 7.38:1 */
    --color-text-ghost: #7d7565; /* 4.14:1 — decorative only */

    /* Brand — the fill holds, the foreground lifts to coral */
    --color-primary: var(--brand); /* redesign dark --red-btn: unchanged #c4451a */
    --color-primary-hover: var(--brand);
    --color-accent: var(--brand-bright); /* redesign dark --red-text #ff7a45 · 7.31:1 */
    --color-accent-muted: var(--brand-bright);
    --color-accent-strong: var(--brand-bright);
    --color-decorative: var(--brand-bright); /* redesign dark --red */

    /* Brand alpha — bright base + higher opacity so tints read on a dark surface */
    --color-accent-tint: color-mix(in srgb, var(--brand-bright) 16%, transparent);
    --color-accent-tint-light: color-mix(in srgb, var(--brand-bright) 10%, transparent);
    --color-accent-hover: color-mix(in srgb, var(--brand-bright) 8%, transparent);
    --color-accent-border: color-mix(in srgb, var(--brand-bright) 32%, transparent);
    --color-accent-border-subtle: color-mix(in srgb, var(--brand-bright) 20%, transparent);

    /* Marker + the drawn shadow — redesign dark --mark / --mark-ink / --shadow */
    --color-mark: #6b6320; /* cream on mark = 5.25:1 */
    --color-mark-ink: #f2ede3;
    --color-shadow-hard: #000;

    /* Functional — overdue keeps the hue, raises opacity for the darker surface */
    --color-danger: var(--brand-bright);
    --color-danger-tint: color-mix(in srgb, var(--brand-bright) 18%, transparent);
    --color-attention: var(--color-text);
    --color-attention-tint: transparent;

    /* Interactive */
    --color-link: var(--brand-bright);
    --color-link-hover: var(--paper);
    --color-focus: var(--brand-bright);
    --color-focus-border: var(--brand-bright);
    --color-selection-bg: var(--color-mark);
    --color-selection-fg: var(--color-mark-ink);
  }
}