/* =====================================================================
   Clipper · design tokens
   The corner barbershop. Light is "Shopfront" (cream enamel, navy ink);
   dark is "Late shift". --red is the one accent (buttons, links, the lit
   phrase, busy chairs); --blue only appears in the pole's stripes and
   the lit phrase's painted shadow; --free is the free-chair light;
   --brass trims signs. Optional dials, set by a site and not here:
   --pole-a / --pole-b (the pole's stripes, default red and blue),
   --busy (the busy light, default the pole red) and --fact-mark.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f5f0e6;
  --card: #fffcf5;
  --well: #ece5d6;
  --line: #d9cfbb;
  --ink: #131a2a;
  --ink-2: #384056;
  --muted: #5f6270;
  --red: #b3202e;
  --red-2: #8f1824;
  --on-red: #ffffff;
  --red-soft: #f6dcd8;
  --blue: #1f4e9c;
  --free: #1d7a4c;                    /* a chair that's free now */
  --brass: #b98a3e;
  --enamel: #fbf7ee;                  /* the face of a sign */
  --receipt: #fffefa;
  --focus: #1f4e9c;
  --shadow-card: 0 1px 0 rgba(19, 26, 42, 0.06), 0 16px 32px -22px rgba(19, 26, 42, 0.5);
  --shadow-lift: 0 30px 60px -28px rgba(19, 26, 42, 0.55);

  --display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(44px, 6vw, 88px);
  --fs-h2: clamp(32px, 4vw, 56px);
  --fs-h3: 22px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.5, 1.6, 0.4, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- Late shift ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #101420;
    --card: #181e2d;
    --well: #141927;
    --line: #2c3448;
    --ink: #f2eee6;
    --ink-2: #ccc8bf;
    --muted: #a3a6b2;
    --red: #ff6b6b;
    --red-2: #ff9090;
    --on-red: #330608;
    --red-soft: #3d1a1d;
    --blue: #6f9de8;
    --free: #5fd39a;
    --brass: #d9ad62;
    --enamel: #1d2436;
    --receipt: #f5f1e6;
    --focus: #6f9de8;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 32px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101420;
  --card: #181e2d;
  --well: #141927;
  --line: #2c3448;
  --ink: #f2eee6;
  --ink-2: #ccc8bf;
  --muted: #a3a6b2;
  --red: #ff6b6b;
  --red-2: #ff9090;
  --on-red: #330608;
  --red-soft: #3d1a1d;
  --blue: #6f9de8;
  --free: #5fd39a;
  --brass: #d9ad62;
  --enamel: #1d2436;
  --receipt: #f5f1e6;
  --focus: #6f9de8;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 32px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}