/* ============================================================
   Cadencer — Design Tokens
   Platform chrome is intentionally toned-back/neutral so tenant
   brand themes can take over the member-facing surfaces.
   A studio's palette is set as data-theme on <html> (espresso,
   terracotta, sky, sage — app/branding.py lists them). No data-theme
   = platform (admin/SaaS) neutral default.
   ============================================================ */

/* ---------- PLATFORM (toned-back neutral default) ---------- */
:root {
  /* surfaces */
  --bg:          #f6f7f9;
  --surface:     #ffffff;
  --surface-2:   #f0f2f5;
  --border:      #e3e6ea;

  /* text */
  --ink:         #1c2430;
  --ink-muted:   #5f6772;   /* WCAG AA: 5.72:1 on #fff (was #6b7480 ≈4.74:1) */
  --ink-faint:   #99a1ac;

  /* brand accent — quiet slate so tenant color pops elsewhere */
  --accent:        #45566b;
  --accent-strong: #33455a;
  --accent-ink:    #ffffff;
  --accent-soft:   #eef1f5;

  /* status (muted to match the restrained chrome) */
  --success: #2f7d5b;
  --warning: #b07d2a;
  --danger:  #b3453d;

  /* status pills — (background, ink) pairs, one source of truth for paid/open/
     pending/failed/void/warn. Inks are dark and carry the AA contrast; tenant
     themes below warm only the cool/neutral BACKGROUNDS so pills stop reading
     cool-blue on warm cream. Platform (this block) keeps the original values. */
  --pill-paid-bg:    #e7f5ec;  --pill-paid-ink:    #1f6b42;
  --pill-open-bg:    #eef1f5;  --pill-open-ink:    #3a4453;
  --pill-pending-bg: #eaf1fb;  --pill-pending-ink: #1c527f;
  --pill-fail-bg:    #fdecea;  --pill-fail-ink:    #a3382f;
  --pill-void-bg:    #f0f0f0;  --pill-void-ink:    #595959;
  --pill-warn-bg:    #fdeccf;  --pill-warn-ink:    #8a5a12;

  /* borders for notices, flashes and the attendance picker — mixed from the
     inks so every palette's warm pill backgrounds get a matching edge */
  --paid-line:   color-mix(in srgb, var(--pill-paid-ink) 30%, var(--surface));
  --warn-line:   color-mix(in srgb, var(--pill-warn-ink) 30%, var(--surface));
  --fail-line:   color-mix(in srgb, var(--pill-fail-ink) 30%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 25%, var(--surface));

  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  /* spacing — one scale for every gap; utilities .mt-N/.mb-N/.my-N in app.css */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem;

  /* content widths — a page picks one of these, never its own */
  --w-narrow: 30rem;   /* sign-in cards, pay link, account security */
  --w-prose:  42rem;   /* reading: legal pages, public-page intro */
  --w-form:   45rem;   /* long forms and the setup wizard */
  --w-page:   60rem;   /* the standard page */
  --w-wide:   77.5rem; /* calendar, wide tables */

  /* shape */
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}

/* ============================================================
   SELECTABLE PALETTES — the four a studio can pick during onboarding
   or in Settings → Branding. Each is a full theme; the page's logo is
   the only other thing that changes between tenants. espresso/terracotta
   mirror the AOD/POM looks so those studios keep their identity.
   ============================================================ */

/* Espresso & Peach (AOD family) */
[data-theme="espresso"] {
  --bg: #fbf7f3; --surface: #ffffff; --surface-2: #f6ede4; --border: #ece2d9;
  --ink: #2a1410; --ink-muted: #7a6157; --ink-faint: #b3a298;
  --accent: #3a1714; --accent-strong: #25100d; --accent-ink: #ffffff; --accent-soft: #f6e7dc;
  --peach: #d9743f; --rose: #e07f8d; --blush: #f9d6d7;
  --highlight: var(--peach); --secondary: #2b5672;
  --font-display: Georgia, "Times New Roman", serif;
  --pill-open-bg: #f2ece3; --pill-pending-bg: #f1eade; --pill-void-bg: #efe8e0;
}

/* Terracotta & Sand (POM family) */
[data-theme="terracotta"] {
  --bg: #f6f1ea; --surface: #fffdf9; --surface-2: #efe6db; --border: #e7d8ca;
  --ink: #2a1416; --ink-muted: #755d57; --ink-faint: #b29c97;
  --accent: #a85f4b; --accent-strong: #8a4a39; --accent-ink: #ffffff; --accent-soft: #f0e2d8;
  --orange: #c2703f; --clay: #a85f4b; --highlight: var(--orange);
  --wine: #4a161b; --secondary: #744c4e;
  --pill-open-bg: #efe6db; --pill-pending-bg: #eee4d7; --pill-void-bg: #ebe2d8;
}

/* Slate & Sky — cool, clean, modern */
[data-theme="sky"] {
  --bg: #f4f7fa; --surface: #ffffff; --surface-2: #e9eff5; --border: #d8e2ec;
  --ink: #16222e; --ink-muted: #566475; --ink-faint: #97a4b2;
  --accent: #2b5672; --accent-strong: #1d3e54; --accent-ink: #ffffff; --accent-soft: #e5eef6;
  --highlight: #4a90c2; --secondary: #396f8e; /* links: AA on every sky surface */
  --pill-open-bg: #e9eff5; --pill-pending-bg: #e4eefa; --pill-void-bg: #eceff2;
}

/* Sage & Cream — warm-neutral, botanical */
[data-theme="sage"] {
  --bg: #f6f5ee; --surface: #fffef9; --surface-2: #ecefe3; --border: #dde2d2;
  --ink: #1f2a20; --ink-muted: #5a6557; --ink-faint: #9aa694;
  --accent: #4a6b4f; --accent-strong: #38543c; --accent-ink: #ffffff; --accent-soft: #e6ede4;
  --highlight: #7fae83; --secondary: #5d6e4b; /* links: AA on every sage surface */
  --pill-open-bg: #ecefe3; --pill-pending-bg: #e7efe6; --pill-void-bg: #ebeee2;
}