/* Lineup — three themes. Each one is a different product, not a palette swap:
   different type, shape language, texture, board treatment and micro-motion. */

/* ============================================================
   1. HERITAGE — cream, oxblood, brass. Serif, pinstripes, barber pole.
   ============================================================ */
[data-theme="heritage"] {
  --bg: #f3ebdd;
  --texture:
    repeating-linear-gradient(90deg, rgba(31, 61, 51, .05) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .7), transparent 55%);
  --surface: #fbf6ec;
  --surface-2: #f0e6d4;
  --text: #241c14;
  --text-dim: #6b5c4a;
  --line: #dbc9ac;
  --rule: linear-gradient(90deg, transparent, #b08a3e 12%, #b08a3e 88%, transparent);
  --rule-h: 2px;
  --rule-color: #cbb489;

  --accent: #7a2027;
  --on-accent: #fdf6e9;
  --accent-soft: rgba(122, 32, 39, .09);
  --accent-line: rgba(122, 32, 39, .3);
  --accent-ink: #6b1b22;
  --accent-2: #8a6524;
  --good: #1f5d43;
  --good-soft: rgba(31, 93, 67, .12);
  --warn: #9c4a12;
  --warn-soft: rgba(156, 74, 18, .12);
  --focus: #7a2027;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-clock: "Fraunces", Georgia, serif;
  --fw-display: 700;
  --track-display: 0;
  --case-display: none;

  --radius: 7px;
  --radius-sm: 4px;
  --radius-pill: 4px;
  --avatar-radius: 50%;
  --avatar-border: 2px solid rgba(176, 138, 62, .55);

  --shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 10px 22px -20px rgba(60, 40, 20, .95);
  --shadow-lg: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 22px 40px -26px rgba(60, 40, 20, .85);
  --card-border: 1px solid var(--line);

  --btn-radius: 4px;
  --btn-border: 1px solid #5c161c;
  --btn-shadow: 0 0 0 2px rgba(176, 138, 62, .35), 0 2px 0 rgba(0, 0, 0, .14);
  --btn-shadow-hover: 0 0 0 2px rgba(176, 138, 62, .6), 0 4px 0 rgba(0, 0, 0, .14);
  --btn-track: .04em;
  --btn-case: none;

  --chip-radius: 4px;
  --chip-border: 1px solid var(--line);
  --input-bg: #fffaf1;
  --input-border: 1px solid var(--line);

  --header-bg: #fbf6ec;
  --header-border: 1px solid var(--line);
  --header-shadow: 0 12px 24px -26px rgba(60, 40, 20, .9);
  --header-rail: repeating-linear-gradient(115deg, #7a2027 0 12px, #fbf6ec 12px 24px, #1f3d33 24px 36px, #fbf6ec 36px 48px);
  --header-rail-h: 5px;
  --mark-bg: repeating-linear-gradient(115deg, #7a2027 0 6px, #fbf6ec 6px 12px, #1f3d33 12px 18px, #fbf6ec 18px 24px);
  --mark-border: 2px solid #b08a3e;
  --mark-radius: 50%;
  --mark-shadow: 0 2px 6px rgba(60, 40, 20, .3);

  --toggle-bg: #efe3cd;
  --toggle-border: 1px solid var(--line);
  --toggle-on-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);

  --board-bg: #fbf6ec;
  --board-border: 1px solid var(--line);
  --board-rule: 1px solid #e6d7ba;
  --board-head-bg: #f0e6d4;
  --board-head-color: #6b5c4a;
  --board-row-hover: rgba(176, 138, 62, .1);
  --board-time: #1f3d33;
  --next-bg: rgba(122, 32, 39, .08);
  --next-edge: 4px solid #7a2027;
  --next-time: #7a2027;
  --me-row: rgba(176, 138, 62, .1);

  --note-bg: #fffaf1;
  --note-border: 1px solid var(--line);
  --note-tilt: -.7deg;
  --note-shadow: 0 8px 18px -14px rgba(60, 40, 20, .9);

  --toast-bg: #241c14;
  --toast-text: #fdf6e9;
  --toast-border: 1px solid #b08a3e;
  --toast-action: #dcae56;
}

[data-theme="heritage"] .site-header::before,
[data-theme="heritage"] .desk-header::before,
[data-theme="heritage"] .brand-mark { animation: barberPole 2.6s linear infinite; }
@keyframes barberPole { to { background-position: 96px 0; } }

[data-theme="heritage"] .eyebrow::after { content: " ✦"; }
[data-theme="heritage"] .tile { background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 40%); }
[data-theme="heritage"] .tile-num { border-bottom: 2px solid rgba(176, 138, 62, .5); padding-bottom: .3rem; display: inline-block; }
[data-theme="heritage"] .board-head { font-variant: small-caps; letter-spacing: .1em; }

/* ============================================================
   2. STRIPES (key: studio) — flat mid-century barber-pole Americana.
      Cream ground, pole red + navy, hard edges, poster type. No gradients
      except hard-stop stripes; no soft shadows anywhere — offsets or nothing.
   ============================================================ */
[data-theme="studio"] {
  --bg: #f4efe3;
  --texture: none;
  --surface: #fffdf7;
  --surface-2: #efe8d9;
  --text: #17161a;
  --text-dim: #4f4a40;
  --line: #cdc2aa;
  --rule: repeating-linear-gradient(115deg, #c8102e 0 14px, #fffdf7 14px 28px, #12326b 28px 42px);
  --rule-h: 4px;
  --rule-color: #12326b;

  --accent: #c8102e;
  --on-accent: #fffdf7;
  --accent-soft: #fae1e4;
  --accent-line: #e3a3ab;
  --accent-ink: #a10d24;
  --accent-2: #12326b;
  --good: #146b45;
  --good-soft: #dcefe3;
  --warn: #a3521c;
  --warn-soft: #f7e6d6;
  --focus: #12326b;

  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-clock: "Oswald", "Arial Narrow", sans-serif;
  --fw-display: 600;
  --track-display: .015em;
  --case-display: uppercase;

  --radius: 2px;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --avatar-radius: 50%;
  --avatar-border: 2px solid #12326b;

  --shadow: none;
  --shadow-lg: 5px 5px 0 #12326b;
  --card-border: 2px solid #17161a;

  --btn-radius: 999px;
  --btn-border: 2px solid #17161a;
  --btn-shadow: none;
  --btn-shadow-hover: 3px 3px 0 #12326b;
  --btn-track: .08em;
  --btn-case: uppercase;

  --chip-radius: 999px;
  --chip-border: 2px solid var(--line);
  --input-bg: #fffdf7;
  --input-border: 2px solid var(--line);

  --header-bg: #fffdf7;
  --header-border: 2px solid #17161a;
  --header-shadow: none;
  /* Red / cream / blue with no double-cream gap — the pole sequence. The mark's
     24px period divides the 96px barberPole travel, so the spin loops seamlessly. */
  --header-rail: repeating-linear-gradient(115deg, #c8102e 0 18px, #fffdf7 18px 36px, #12326b 36px 54px);
  --header-rail-h: 9px;
  --mark-bg: repeating-linear-gradient(115deg, #c8102e 0 8px, #fffdf7 8px 16px, #12326b 16px 24px);
  --mark-border: 2px solid #17161a;
  --mark-radius: 50%;
  --mark-shadow: none;

  --toggle-bg: #efe8d9;
  --toggle-border: 2px solid #17161a;
  --toggle-on-shadow: none;

  --board-bg: #fffdf7;
  --board-border: 2px solid #17161a;
  --board-rule: 1px solid #e2d9c6;
  --board-head-bg: #12326b;
  --board-head-color: #fffdf7;
  --board-row-hover: #f6efe0;
  --board-time: #12326b;
  --next-bg: #fae1e4;
  --next-edge: 6px solid #c8102e;
  --next-time: #a10d24;
  --me-row: #e9f0fb;

  --note-bg: #fffdf7;
  --note-border: 2px solid #17161a;
  --note-tilt: -1deg;
  --note-shadow: 5px 5px 0 #c8102e;

  --toast-bg: #17161a;
  --toast-text: #fffdf7;
  --toast-border: 2px solid #c8102e;
  --toast-action: #f4a0aa;
}

/* Slab display for the poster voice; Oswald carries the small label type. */
[data-theme="studio"] h1,
[data-theme="studio"] .brand-text b,
[data-theme="studio"] .confirm .big {
  font-family: "Alfa Slab One", Rockwell, Georgia, serif;
  font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.12;
}

[data-theme="studio"] .site-header { position: sticky; top: 0; z-index: 20; }
[data-theme="studio"] .brand-mark { animation: barberPole 3.2s linear infinite; }

/* Stripe motif, used twice: top rule of the page, bottom rule of the page. */
[data-theme="studio"] .site-footer { border-top: 0; position: relative; }
[data-theme="studio"] .site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--header-rail);
}

[data-theme="studio"] .tile-num {
  align-self: flex-start; background: #12326b; color: #fffdf7;
  padding: .18rem .6rem; border-radius: 999px; letter-spacing: .14em;
}
[data-theme="studio"] .tile:hover { transform: translate(-2px, -4px); }
[data-theme="studio"] .badge { border-width: 2px; font-weight: 600; }
[data-theme="studio"] .chip[aria-pressed="true"] { border-color: #17161a; }
[data-theme="studio"] .board-head { letter-spacing: .2em; }
[data-theme="studio"] .board-row .t { font-weight: 600; }
/* Inter runs wider than the heritage body face — keep a shift on one line. */
[data-theme="studio"] .week-grid td.on i { border-width: 2px; border-radius: 999px; white-space: nowrap; font-size: .78rem; }

/* ============================================================
   3. MIDNIGHT (key: street) — the after-hours shop. Matte charcoal, barber
      red, brass. Condensed caps, hairlines, a checkerboard tile strip.
   ============================================================ */
[data-theme="street"] {
  --bg: #0f0f12;
  --texture: none;
  --surface: #191920;
  --surface-2: #212129;
  --text: #f2efe9;
  --text-dim: #a5a099;
  --line: #34343d;
  --rule: #34343d;
  --rule-h: 1px;
  --rule-color: #34343d;

  --accent: #c8102e;
  --on-accent: #fbf7f0;
  --accent-soft: #2a1418;
  --accent-line: #6d2029;
  --accent-ink: #ef4a5e;
  --accent-2: #c9a227;
  --good: #57c98a;
  --good-soft: #16261d;
  --warn: #d99a3a;
  --warn-soft: #2a2115;
  --focus: #ef4a5e;

  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-clock: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --fw-display: 600;
  --track-display: .02em;
  --case-display: uppercase;

  --radius: 3px;
  --radius-sm: 3px;
  --radius-pill: 999px;
  --avatar-radius: 50%;
  --avatar-border: 2px solid #2e2e36;

  /* Blurred shadows vanish on near-black — Midnight lifts with a flat red ring. */
  --shadow: none;
  --shadow-lg: 0 0 0 2px #c8102e;
  --card-border: 1px solid var(--line);

  --btn-radius: 3px;
  --btn-border: 1px solid #c8102e;
  --btn-shadow: none;
  --btn-shadow-hover: 0 0 0 3px rgba(200, 16, 46, .3);
  --btn-track: .12em;
  --btn-case: uppercase;

  --chip-radius: 3px;
  --chip-border: 1px solid var(--line);
  --switch-radius: 999px;
  --input-bg: #121216;
  --input-border: 1px solid #33333c;

  --header-bg: #131317;
  --header-border: 1px solid #26262d;
  --header-shadow: none;
  /* 6px squares over a 12px tile, and a 12px band so two rows show — one row
     alone reads as a dashed line, not a checkerboard. */
  --header-rail: conic-gradient(#8f8a82 25%, #14141a 0 50%, #8f8a82 0 75%, #14141a 0) 0 0 / 12px 12px;
  --header-rail-h: 12px;
  --mark-bg: conic-gradient(#c8102e 25%, #f2efe9 0 50%, #c8102e 0 75%, #f2efe9 0) 0 0 / 30px 30px;
  --mark-border: 1px solid #3a3a42;
  --mark-radius: 3px;
  --mark-shadow: none;

  --toggle-bg: #101014;
  --toggle-border: 1px solid #2e2e36;
  --toggle-on-shadow: none;

  --board-bg: #0c0c0f;
  --board-border: 1px solid #2a2a32;
  --board-rule: 1px solid #22222a;
  --board-head-bg: #131317;
  --board-head-color: #c9a227;
  --board-row-hover: #16161b;
  --board-text: #efece6;
  --board-svc: #9b968e;
  --board-time: #f0ece4;
  --board-header-bg: #101014;
  --clock-color: #f5efe3;
  --clock-glow: 0 0 26px rgba(201, 162, 39, .45);
  --clock-track: .02em;
  --next-bg: #241216;
  --next-edge: 4px solid #c8102e;
  --next-time: #ef4a5e;
  --me-row: #1d1a12;

  --note-bg: #1c1c21;
  --note-border: 1px solid #3a3a42;
  --note-tilt: 0deg;
  --note-shadow: none;

  --toast-bg: #f2efe9;
  --toast-text: #101014;
  --toast-border: 1px solid #c8102e;
  --toast-action: #a10d24;
}

[data-theme="street"] .site-header { position: sticky; top: 0; z-index: 20; }

/* Checkerboard tile, used twice: the strip under the header, the strip over the footer. */
[data-theme="street"] .site-footer { border-top: 0; position: relative; }
[data-theme="street"] .site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 12px; background: var(--header-rail);
}

[data-theme="street"] .brand-text i,
[data-theme="street"] .site-nav a { letter-spacing: .08em; }
[data-theme="street"] .tile-num { letter-spacing: .2em; }
[data-theme="street"] .badge { font-weight: 600; }
[data-theme="street"] .board-head { letter-spacing: .2em; }
[data-theme="street"] .week-grid td.on i { white-space: nowrap; font-size: .78rem; }

/* The board still glows after hours — warm bulb, not an LED departure sign. */
[data-theme="street"] .board-row .t { text-shadow: 0 0 16px rgba(201, 162, 39, .28); }
[data-theme="street"] .board-row.is-next { border-left: var(--next-edge); animation: rowIn .38s both, emberPulse 3.4s ease-in-out infinite 1s; }
[data-theme="street"] .board-row.is-next .t { text-shadow: 0 0 18px rgba(239, 74, 94, .5); }
[data-theme="street"] .board-row.is-done .t { color: #5d5951; text-shadow: none; }
@keyframes emberPulse { 50% { background: #2d151a; } }

[data-theme="street"] .desk-header { border-bottom: 1px solid #26262d; }
[data-theme="street"] .deck-stat b { color: #f2efe9; }