/*
 * CenterFlow — "Warm Editorial" design system
 * Shared across www, check-in, roster and classnavi-api.
 *
 * This file is linked LAST in every page so its :root token values win over
 * each app's legacy palette. The apps are already ~90% var()-driven, so
 * redefining the tokens here reskins the entire product. Base typography and
 * form primitives below are element-level (low specificity) so app component
 * classes keep their layout and only inherit the new look.
 *
 * Font strategy: a curated *system* serif stack for display type (Iowan /
 * Palatino / Georgia) — CSP-safe, zero network, no FOUT. Swap for a self-hosted
 * face (e.g. Fraunces) later if desired; only --font-display changes.
 */

:root {
  /* ---- Type ---- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* ---- Warm editorial palette (light) ---- */
  --paper:        #f7f4ef;  /* canvas */
  --paper-2:      #f1ece3;  /* sunken wells, striped rows */
  --surface:      #fefcf8;  /* raised cards */
  --surface-2:    #fbf8f2;  /* secondary panels */
  --ink:          #2b2722;  /* primary text / headings */
  --ink-soft:     #4a4238;
  --taupe:        #6f6656;  /* muted text */
  --line:         #e4dccf;  /* hairline borders */
  --line-strong:  #d8cdb9;

  --accent:       #b4531f;  /* terracotta */
  --accent-hover: #9c4519;
  --accent-soft:  #f3e4d8;  /* tinted accent surface */
  --accent-2:     #3e5c4b;  /* forest green, secondary */
  --gold:         #b0862f;  /* warm highlight */

  /* Always-dark band (footers, dark headers, kiosk). Stays dark in BOTH
     themes so light text on it never inverts. Use --band-ink for text. */
  --band:      #241f1a;
  --band-ink:  #ede6d8;
  --band-muted: #b0a58f;

  /* Semantic status (warm-tuned) */
  --ok:      #3e6b4e;  --ok-bg:   #e7efe6;
  --warn:    #9a6b1e;  --warn-bg: #f6ecd6;
  --err:     #a23a2e;  --err-bg:  #f5e1dc;

  /* ---- Legacy token aliases (what the apps actually reference) ---- */
  --navy:  var(--ink);        /* headings / brand ink */
  --blue:  var(--accent);     /* links, primary actions, focus */
  --blue-light: #c56a34;
  --teal:  var(--accent-2);   /* gradient partner, accents */
  --bg:    var(--paper);
  --card:  var(--surface);
  --text:  var(--ink);
  --muted: var(--taupe);
  --border: var(--line);

  /* ---- Form / shape / depth ---- */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(43, 39, 34, 0.05), 0 1px 1px rgba(43, 39, 34, 0.04);
  --shadow: 0 1px 2px rgba(43, 39, 34, 0.05), 0 14px 34px -18px rgba(43, 39, 34, 0.22);
  --shadow-lg: 0 2px 4px rgba(43, 39, 34, 0.06), 0 30px 60px -24px rgba(43, 39, 34, 0.30);
  --ring: 0 0 0 3px rgba(180, 83, 31, 0.28);

  color-scheme: light;
}

/* ---- Dark: "candlelit study" (warm, not cold black) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #17130d;
    --paper-2:      #1e1a13;
    --surface:      #221d16;
    --surface-2:    #26211a;
    --ink:          #ede6d8;
    --ink-soft:     #d6cdba;
    --taupe:        #a99c86;
    --line:         #362d21;
    --line-strong:  #46392a;

    --accent:       #e08a4f;
    --accent-hover: #ef9c63;
    --accent-soft:  #33251a;
    --accent-2:     #86a685;
    --gold:         #d3a44e;

    --ok:      #86bd97;  --ok-bg:   #21301f;
    --warn:    #d9a24a;  --warn-bg: #322611;
    --err:     #e58a78;  --err-bg:  #341f1b;

    --blue-light: #ef9c63;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -18px rgba(0, 0, 0, 0.66);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.50), 0 34px 70px -26px rgba(0, 0, 0, 0.72);
    --ring: 0 0 0 3px rgba(224, 138, 79, 0.32);

    color-scheme: dark;
  }
}

/* Explicit manual override always wins over the media query above. */
:root[data-theme="dark"] {
  --paper:        #17130d;
  --paper-2:      #1e1a13;
  --surface:      #221d16;
  --surface-2:    #26211a;
  --ink:          #ede6d8;
  --ink-soft:     #d6cdba;
  --taupe:        #a99c86;
  --line:         #362d21;
  --line-strong:  #46392a;

  --accent:       #e08a4f;
  --accent-hover: #ef9c63;
  --accent-soft:  #33251a;
  --accent-2:     #86a685;
  --gold:         #d3a44e;

  --ok:      #86bd97;  --ok-bg:   #21301f;
  --warn:    #d9a24a;  --warn-bg: #322611;
  --err:     #e58a78;  --err-bg:  #341f1b;

  --blue-light: #ef9c63;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -18px rgba(0, 0, 0, 0.66);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.50), 0 34px 70px -26px rgba(0, 0, 0, 0.72);
  --ring: 0 0 0 3px rgba(224, 138, 79, 0.32);

  color-scheme: dark;
}

/* ============================================================= *
 *  Base typography & elements (low specificity — additive)
 * ============================================================= */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Editorial serif display for headings. Serif reads best a touch lighter. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1 { letter-spacing: -0.012em; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

hr { border: none; border-top: 1px solid var(--line); margin: 1.75rem 0; }

::selection { background: var(--accent-soft); color: var(--ink); }

code, pre, kbd, samp { font-family: var(--font-mono); }

/* Consistent, on-brand focus ring across the whole product. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ---- Form controls: gentle baseline, app classes still win ---- */
input:where([type="text"], [type="email"], [type="password"], [type="search"],
  [type="tel"], [type="number"], [type="url"], [type="date"], [type="time"]),
select, textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
input:where([type="text"], [type="email"], [type="password"], [type="search"],
  [type="tel"], [type="number"], [type="url"], [type="date"], [type="time"]):focus,
select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
}
::placeholder { color: color-mix(in srgb, var(--taupe) 80%, transparent); }

/* Refined, unobtrusive warm scrollbars */
* { scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--taupe); }

/* ============================================================= *
 *  Theme toggle control (used in app headers)
 * ============================================================= */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-appearance: none;
  appearance: none;
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--accent); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle--float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 44px;
  height: 44px;
  box-shadow: var(--shadow);
}
.theme-toggle--float:hover { box-shadow: var(--shadow-lg); }
@media print { .theme-toggle--float { display: none; } }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}