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

   Type is not a modular scale. The spec locks body at 18px, names other
   sizes as rem of the 16px root, and clamps three headings. Write those
   rem values on the block. Do not snap them onto --font-xs…--font-2xl.

   Space stays a 4px fluid grid for forms and the task list, which the
   spec does not draw. Landing layout uses the spec's desktop numbers
   and jumps once, inside the notebook @container (width < 52rem).
     https://utopia.fyi/space/calculator?c=360,16,1.2,1060,18,1.25,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l

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

:root {
  /* ── Type ─────────────────────────────────────────────────────
     Body and the three display clamps are the design scale. Role
     tokens below are the spec rem values, not nearest-step aliases. */

  --font-base: 1.125rem; /* body, 18px */
  --font-cta: 0.95rem; /* nav links, default .cta */
  --font-cta-lg: 1.1rem; /* page CTA: hero, FAQ, prices, final */

  /* Display. Copied from the spec. --font-hero is global h1; --font-section
     is landing h2; --font-final is the closing CTA heading. */
  --font-hero: clamp(3rem, 7.5vw, 5.6rem);
  --font-section: clamp(1.9rem, 3.8vw, 2.9rem);
  --font-final: clamp(2.2rem, 5vw, 3.6rem);

  /* Product UI the spec does not draw (forms, settings, utilities). */
  --font-xs: 0.78125rem;
  --font-sm: 0.9375rem;
  --font-md: 1.35rem;
  --font-lg: 1.62rem;
  --font-xl: 1.944rem;
  --font-2xl: 2.3328rem;
  --font-2xs: var(--font-xs);

  /* Utilities .text-3xl / 4xl / 5xl keep working after +5/+6/+7 went away. */
  --font-3xl: var(--font-2xl);
  --font-4xl: var(--font-section);
  --font-5xl: var(--font-hero);

  /* ── Fluid Space Scale (360 → 1060) ────────────────────────────

     ┌──────────────────────────────────────────────────────────────────────────┐
     │ 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    │                                 │
     └──────────────────────────────────────────────────────────────────────────┘
  ────────────────────────────────────────────────────────────── */

  /* Individual values */
  --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 */

  /* One-up pairs (more dramatic min→max scaling) */
  --space-3xs-2xs: clamp(0.25rem, 0.0893rem + 0.7143vw, 0.5625rem); /*  4px →   9px */
  --space-2xs-xs: clamp(0.5rem, 0.3071rem + 0.8571vw, 0.875rem); /*  8px →  14px */
  --space-xs-s: clamp(0.75rem, 0.5571rem + 0.8571vw, 1.125rem); /* 12px →  18px */
  --space-s-m: clamp(1rem, 0.6464rem + 1.5714vw, 1.6875rem); /* 16px →  27px */
  --space-m-l: clamp(1.75rem, 1.3643rem + 1.7143vw, 2.5rem); /* 28px →  40px │ section block-end */
  --space-l-xl: clamp(2rem, 1.2929rem + 3.1429vw, 3.375rem); /* 32px →  54px */
  --space-xl-2xl: clamp(2.875rem, 2.1679rem + 3.1429vw, 4.25rem); /* 46px →  68px │ hero CTA → demo */
  --space-2xl-3xl: clamp(4rem, 2.9714rem + 4.5714vw, 6rem); /* 64px →  96px │ section block-start */

  /* Custom pairs — tailored for Elephouse layout patterns */
  --space-s-l: clamp(1rem, 0.3571rem + 2.8571vw, 2.25rem); /* 16px →  36px */
  --space-s-xl: clamp(1rem, 0.6143rem + 1.7143vw, 1.75rem); /* 16px →  28px */
  --space-l-2xl: clamp(2rem, 0.7143rem + 5.7143vw, 4.5rem); /* 32px →  72px │ ratio-grid gap */
  --space-l-3xl: clamp(2rem, -0.4429rem + 10.8571vw, 6.75rem); /* 32px → 108px */
  --space-xl-3xl: clamp(3rem, 1.0714rem + 8.5714vw, 6.75rem); /* 48px → 108px */

  /* ━━━ 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), --text-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% */

  /* ── Text Scale ─────────────────────────────────────────────── */
  --ink-deep: #15100c; /* redesign dark --paper · dark-mode page floor */
  --text: #26221b; /* redesign --ink · 14.65:1 */
  --text-2: #46413a; /* redesign --body-text · 9.36:1 */
  --text-3: #56524a; /* redesign --muted · 7.20:1 */
  --text-4: #6b6559; /* redesign --pencil · 5.36:1 (their own AA fix) */
  --text-5: color-mix(in srgb, var(--text-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: 0.04em; /* product labels; spec buttons and nav links have none */
  --tracking-wide: 0.05em; /* metadata, citations, footer */
  --tracking-wider: 0.1em; /* labels, eyebrows, col-labels */

  /* ── 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: pricing features, pull-quote */
  --leading-normal: 1.5; /* textarea, relaxed prose */

  /* ── 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 */
  --weight-black: 700; /* was 900: no face above 700 is loaded, so 900 silently resolved to 700 anyway. The redesign's heaviest weight is 700. */

  /* ── Border Radius ─────────────────────────────────────────── */
  --radius-s: 3px; /* checkboxes, tags, status badges */
  --radius-m: 4px; /* inputs, rows; spec buttons are --radius-s (3px) */
  --radius-l: 6px; /* cards, grids, screenshots, search field */
  --radius-full: 9999px; /* pill shape: range input */

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

  /* ── Borders ───────────────────────────────────────────────── */
  --border-width: 2px; /* default border width: hr, table, fieldset, kbd */
  --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);

  /* Sidebar — two-column with fixed sidebar width */
  --sidebar-gap: var(--space-s);
  --sidebar-align: flex-start;
  --sidebar-size: 20rem;
  --sidebar-wrap-at: 50%;

  /* Switcher — row↔column based on container width */
  --switcher-space: var(--space-s);
  --switcher-threshold: 40rem;
  --switcher-vertical-alignment: flex-start;

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

  /* Ratio Grid — named column proportions */
  --ratio-grid-columns: 1fr 2fr;
  --ratio-grid-gap: var(--space-l-2xl);
  --ratio-grid-align: start;

  /* 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, 54ch);
  --center-padding: var(--space-s);

  /* Frame — fixed aspect ratio container */
  --frame-ratio: 16 / 9;

  /* Reel — horizontal scroll strip */
  --reel-space: var(--space-s);
  --reel-padding: var(--space-s);
  --reel-thumb: var(--brand-light);
  --reel-track: transparent;
  --reel-item-width: auto;

  /* Imposter — overlay/modal positioning */
  --positioning: absolute;

  /* 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: 2.5rem; /* textarea min-height, color input size */
  --form-control-toggle-size: 1.5rem; /* 24px — the redesign's checkbox */

  /* ── Measure (readable line length) ────────────────────────── */
  --measure-narrow: 48ch; /* pricing-subhead */
  --measure: 54ch; /* founder-text, hero-text */
  --measure-wide: 58ch; /* manifesto-body */

  /* ── Layout ────────────────────────────────────────────────── */
  --max: 66.25rem; /* redesign sheet/nav/footer are all 1060px wide */
  --col: 1.75rem; /* spec --pad 28px; 16px at the notebook/nav @container */

  /* ── 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(--text); /* body, headlines, strong, nav-brand, pricing-amount */
  --color-text-prose: var(--text-2); /* paragraphs, quotes, list items, task-title */
  --color-text-muted: var(--text-3); /* nav-links, descriptions, periods, nav-icon */
  --color-text-faint: var(--text-4); /* hashtags, captions, placeholders, arrows, cite, footer-made on dark */
  --color-text-ghost: var(--text-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(--text); /* 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); /* heavier: masthead */

  /* 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(--text); /* 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(--text-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(--font-cta);
  --button-line-height: var(--leading-none);
  --button-letter-spacing: 0;
  --button-padding: 0.625rem 1.25rem; /* spec .cta: 10px 20px */
  --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: 0.85rem; /* spec .chip / .status */
  --badge-font-weight: var(--weight-semi);
  --badge-letter-spacing: normal;
  --badge-line-height: var(--leading);
  --badge-padding: 1px 8px; /* spec .chip */
  --badge-border-radius: var(--radius-full);
  --badge-background-color: var(--color-bg-muted);
  --badge-border-color: transparent;
  --badge-color: var(--color-text-muted);

  /* Notice */
  --notice-font-family: var(--font-label);
  --notice-font-size: var(--font-xs);
  --notice-letter-spacing: var(--tracking);
  --notice-padding: var(--space-2xs) var(--space-s);
  --notice-gap: var(--space-2xs);
  --notice-border-radius: var(--radius-m);
  --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);
  }
}