/* Design tokens — the house look.
 *
 * Shared by every site. Change here and every site inherits it.
 * Sites compose with these. The one thing a site may do is override BRAND
 * tokens (colour, type families, radius, and the few named below) in its
 * site.css -- garden's green and loyalty-wallet's palette do. Anything more
 * than that belongs in the shared layer (S29).
 *
 * Warm, editorial, restrained. Cream ground rather than stark white,
 * clay accent, serif display. Calm rather than loud.
 */

:root {
  /* Ground and ink */
  --bg:            #faf9f5;
  --bg-raised:     #ffffff;
  --bg-sunken:     #f3f1ea;
  --ink:           #1f1e1d;
  --ink-muted:     #6b6862;
  --ink-faint:     #9a958c;
  --rule:          #e6e2d8;

  /* Accent — clay. Deepened 2026-09-04 from #c96442 (3.70:1, failed the
     4.5:1 WCAG AA text bar) — same hue/saturation, just darker. Dark
     mode's accent below already passes (6.29:1) and is untouched. */
  --accent:        #ae5132;
  --accent-hover:  #91452e;
  --accent-wash:   #f7ede8;

  /* Type */
  --font-display:  ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step--1:       clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:        clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:        clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem);
  --step-2:        clamp(1.6rem, 1.45rem + 0.7vw, 2.05rem);
  --step-3:        clamp(2.1rem, 1.8rem + 1.4vw, 3rem);
  --step-4:        clamp(2.6rem, 2rem + 2.6vw, 4.2rem);

  --measure:       68ch;
  --leading:       1.65;
  --leading-tight: 1.15;

  /* Space — 4px base */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;

  --radius:    6px;
  --radius-lg: 12px;

  /* Heading character. House: regular-width, semi-bold. A site using a variable
     font can make its headings heavier or narrower here. */
  --display-weight:  600;
  --display-stretch: 100%;

  /* Colours a site may need to name apart from its accent. The defaults
     reproduce the house look exactly; only a site with a different palette sets them. */
  --error:         var(--accent);   /* .error text */
  --highlight:     var(--accent);   /* small badges: balance chips, the wordmark dot */
  --on-highlight:  var(--bg);
  --ticket-bg:     var(--accent);   /* the .ticket card */
  --ticket-ink:    var(--bg);

  --shadow: 0 1px 2px rgb(31 30 29 / 0.04), 0 8px 24px -12px rgb(31 30 29 / 0.10);

  /* Motion. Two speeds cover every interactive state this factory has:
     colour/opacity changes (fast) and layout-adjacent moves like the
     sticky header's shadow (base). prefers-reduced-motion below overrides
     both to near-zero, so using these is accessible by construction. */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms var(--ease);
  --transition-base: 200ms var(--ease);
}

/* Dark. Default follows the system; [data-theme] wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #1b1a18;
    --bg-raised:    #232120;
    --bg-sunken:    #151413;
    --ink:          #f2efe8;
    --ink-muted:    #a8a299;
    --ink-faint:    #6f6a62;
    --rule:         #35322e;
    --accent:       #e08363;
    --accent-hover: #ee9877;
    --accent-wash:  #2b2320;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  --bg:           #1b1a18;
  --bg-raised:    #232120;
  --bg-sunken:    #151413;
  --ink:          #f2efe8;
  --ink-muted:    #a8a299;
  --ink-faint:    #6f6a62;
  --rule:         #35322e;
  --accent:       #e08363;
  --accent-hover: #ee9877;
  --accent-wash:  #2b2320;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
}