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

   Type is fluid: one Utopia config, 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

   Space is fixed, built on the 44px grid cell (see Grid and Space).

   Blocks never write a raw length. Type: pick the nearest step at
   1060px. Space: pick the nearest step.
   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 */
  --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 */

  /* ── Grid and Space ────────────────────────────────────────────
     Spacing is fixed, not fluid. One unit, the notebook's grid cell
     (44px), sizes the dot grid, task rows and touch targets; every space
     step is a fraction or multiple of it, so row edges land on dot rows.
     Two small steps cover spacing inside components (chip padding, icon
     gaps, strike overhang). Type stays fluid on the Utopia scale above.

     ┌─────────────────┬──────────────┬────────┐
     │ Token           │ Value        │ px     │
     ├─────────────────┼──────────────┼────────┤
     │ --space-1       │ 0.25rem      │    4px │
     │ --space-2       │ 0.5rem       │    8px │
     │ --space-quarter │ cell / 4     │   11px │
     │ --space-half    │ cell / 2     │   22px │
     │ --space-cell    │ cell         │   44px │
     │ --space-2cell   │ cell × 2     │   88px │
     │ --space-3cell   │ cell × 3     │  132px │
     └─────────────────┴──────────────┴────────┘
  ────────────────────────────────────────────────────────────── */
  --grid-cell: 2.75rem; /* 44px · dot pitch, row height, touch target */

  --space-1: 0.25rem; /* 4px · inside components */
  --space-2: 0.5rem; /* 8px · inside components */
  --space-quarter: calc(var(--grid-cell) / 4); /* 11px */
  --space-half: calc(var(--grid-cell) / 2); /* 22px */
  --space-cell: var(--grid-cell); /* 44px */
  --space-2cell: calc(var(--grid-cell) * 2); /* 88px */
  --space-3cell: calc(var(--grid-cell) * 3); /* 132px · the notebook margin */

  /* ── Hand-sized ────────────────────────────────────────────────
     Fixed sizes from the same family. */
  --size-target: var(--grid-cell); /* 44px · minimum touch target */
  --size-checkbox: 1.5rem; /* 24px · drawn checkbox, border-box */

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

     Values outside the target palette (docs/coherence-audit-brief.md
     §2.1) go with their last consumer; none is left. 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-bright: #ff7a45; /* redesign dark --red · 7.31:1 on --ink-deep */

  /* Brand alpha. --brand-soft is the redesign's --red-soft verbatim. */
  --brand-soft: rgba(224, 85, 32, 0.55); /* redesign --red-soft · the margin rule */

  /* ── 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-3: #e7e4db; /* redesign --grid · raised surface: code, hairlines */

  /* ── 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) */

  /* ── Notebook Surface ─────────────────────────────────────────
     The dot grid painted on <body>, through --color-dot. Its pitch is
     --grid-cell (Grid and Space). */
  --dot: #d6d2c7; /* redesign --dot */

  /* ── 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, errors */

  /* ── 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 */
  --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-full: 9999px; /* pill shape: badges */

  /* ── 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 */

  /* ── Blur ──────────────────────────────────────────────────── */
  --blur-glass: 8px; /* the sticky site nav over the page */

  /* ── Shadow ──────────────────────────────────────────────────
     The redesign's drawn offset under buttons: no blur, full opacity, it
     reads as ink on paper rather than as light. */
  --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 */
  /* A hairline edge on what floats over the sheet, drawn as a shadow so it
     adds no height. Below for things at the top, above for things docked at
     the bottom. */
  --shadow-hairline-below: 0 var(--stroke-s) 0 var(--color-border); /* site nav, toast */
  --shadow-hairline-above: 0 calc(-1 * var(--stroke-s)) 0 var(--color-border); /* site footer, docked search */

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

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

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

  /* Cluster — wrapping flex group (tags, buttons, nav) */
  --cluster-space: var(--space-half);
  --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-half);

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

  /* 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(--size-target); /* inputs, textarea, select */
  --form-control-toggle-size: var(--size-checkbox); /* checkbox, create plus, roadmap indent */

  /* ── 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-half); /* page gutter: 22px */
  --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.

     The target palette (docs/coherence-audit-brief.md §2.1) names colours
     by role. Those names are spec vocabulary, not custom properties; this
     table says which semantic token implements each one.

     ┌──────────────┬──────────────────────┬──────────────────┬──────────────────┐
     │ Spec name    │ Semantic token       │ Light            │ Dark             │
     ├──────────────┼──────────────────────┼──────────────────┼──────────────────┤
     │ --paper      │ --color-bg           │ --paper  #f8f6f1 │ --ink-deep       │
     │ --ink        │ --color-text         │ --ink    #26221b │ #f2ede3          │
     │ --body-text  │ --color-text-prose   │ --ink-2  #46413a │ #d8d1c4          │
     │ --muted      │ --color-text-muted   │ --ink-3  #56524a │ #c3bcaf          │
     │ --pencil     │ --color-text-faint   │ --ink-4  #6b6559 │ #a9a192          │
     │ --grid       │ --color-bg-raised,   │ --paper-3 #e7e4db│ #2a2118          │
     │              │ --color-border       │                  │                  │
     │ --dot        │ --color-dot          │ --dot    #d6d2c7 │ #2c2318          │
     │ --red        │ --color-decorative   │ --brand-light    │ --brand-bright   │
     │ --red-soft   │ --color-accent-border│ --brand-soft     │ coral 45%        │
     │ --red-btn    │ --color-primary      │ --brand  #c4451a │ --brand          │
     │ --red-text   │ --color-accent,      │ --brand  #c4451a │ --brand-bright   │
     │              │ -accent-strong,      │                  │ #ff7a45          │
     │              │ --color-danger, -link│                  │                  │
     │ --mark       │ --color-mark         │ --mark   #efe97a │ #6b6320          │
     └──────────────┴──────────────────────┴──────────────────┴──────────────────┘

     The offset button shadow is --ink (§2.5), so --color-shadow-hard
     follows --color-text.

     Raw tokens never change with the scheme; only this layer does. So
     anything that must stay light in both schemes (the social asset
     images) reads raw tokens directly.

     The one derived colour is --color-bg-glass: the page colour at 88%,
     because the sticky nav's backdrop blur needs true alpha. It mixes
     --color-bg, so it follows the scheme with no dark override.
  ────────────────────────────────────────────────────────────── */

  /* 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); /* field labels, hashtags, captions, placeholders, arrows, cite, footer-made on dark */

  /* Surfaces */
  --color-bg: var(--paper); /* page bg, card bg, input bg */
  --color-bg-raised: var(--paper-3); /* code bg */
  --color-bg-glass: color-mix(in srgb, var(--color-bg) 88%, transparent); /* nav and footer over the dots */
  --color-dot: var(--dot); /* the dot grid on <body> */

  /* 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-accent: var(--brand); /* links, labels, eyebrows — SMALL TEXT, needs AA */

  /* 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 */
  --color-accent-border: var(--brand-soft); /* the margin rule */

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

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

  /* Marker highlight + the hard offset shadow under buttons */
  --color-mark: var(--mark);
  --color-mark-ink: var(--mark-ink);
  --color-shadow-hard: var(--color-text); /* spec: offset --ink shadow, in both schemes */

  /* Borders: the spec's --grid, the same value as the raised surface, so
     it follows the scheme with it. */
  --color-border: var(--color-bg-raised); /* hairlines: hr, tables, kbd, nav, footer, muted chip outline */

  /* Functional */
  --color-danger: var(--warn); /* error/overdue text */

  /* Interactive */
  --color-link: var(--brand); /* default link color — 4.61:1 */
  --color-link-hover: var(--color-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-selection-bg: var(--color-mark); /* selection uses the same pen as the highlighter */
  --color-selection-fg: var(--color-mark-ink);

  /* 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-2) var(--space-half); /* spec .cta 10px 20px, snapped */
  --button-border-radius: var(--radius-s);
  --button-background-color: var(--color-primary); /* spec .cta is fill only, no border */
  --button-color: var(--color-on-primary);

  /* 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-2); /* 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-size: var(--text-sm);
  --notice-color: var(--color-text);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   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-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 */

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

    /* Brand alpha — bright base */
    --color-accent-border: color-mix(in srgb, var(--brand-bright) 45%, transparent); /* redesign dark --red-soft */

    /* Marker — redesign dark --mark / --mark-ink */
    --color-mark: #6b6320; /* cream on mark = 5.25:1 */
    --color-mark-ink: #f2ede3;

    /* Functional */
    --color-danger: var(--brand-bright);

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