/*
 * theme.css — Sundari Dental Studio.
 * Swiss grid mood: square corners, no shadow, one quiet blue, a great deal
 * of air. Light opens by default; dark is a deliberately re-tuned marine
 * palette, not an inversion.
 */

:root {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef4f8;
  --border: #dbe2e7;
  --border-strong: #aebdc7;
  --ink: #16232e;
  --muted: #62686e;
  --accent: #1f5677;
  --accent-hover: #163f59;
  --accent-ink: #ffffff;
  --accent-text: #2b6e94;
  --accent-strong: #1f5677;
  --accent-soft: #e4edf3;
  --accent-border: #b9d0dd;
  --success: #157a4a;
  --success-ink: #ffffff;
  --success-soft: #e0efe6;
  --success-strong: #146b41;
  --warning: #a15a13;
  --warning-ink: #ffffff;
  --warning-soft: #f4e9dc;
  --warning-strong: #8f4f10;
  --danger: #ab2b28;
  --danger-ink: #ffffff;
  --danger-soft: #f5e2e1;
  --danger-strong: #96201e;
  --chart-1: #1f5677;
  --chart-2: #4a8bab;
  --chart-3: #7fb2c9;
  --chart-4: #16232e;
  --chart-5: #8f4f10;
  --chart-6: #62686e;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-btn: none;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 62ch;

  /* The trust band's own deep marine ground — darker than --accent on purpose,
     so the one dark statement band reads as a different register, not a
     repeat of the hero. */
  --x-marine: #0e2333;
  --x-marine-ink: #f4f9fc;
  --x-marine-line: #24445b;
}

html[data-theme="dark"] {
  --canvas: #0e1922;
  --surface: #142330;
  --surface-2: #1a2c3a;
  --border: #26394a;
  --border-strong: #3c505e;
  --ink: #e9f0f4;
  --muted: #9db0bb;
  --accent: #5a9ec3;
  --accent-hover: #74b1d3;
  --accent-ink: #0b1a22;
  --accent-text: #83c1e3;
  --accent-strong: #9bd3f0;
  --accent-soft: #17313f;
  --accent-border: #2f5468;
  --success: #3fa374;
  --success-ink: #06180f;
  --success-soft: #12291d;
  --success-strong: #7fcaa4;
  --warning: #c98a4b;
  --warning-ink: #1c1006;
  --warning-soft: #2c1f10;
  --warning-strong: #e0ac75;
  --danger: #cf6b66;
  --danger-ink: #1c0908;
  --danger-soft: #301513;
  --danger-strong: #e59490;
  --chart-1: #5a9ec3;
  --chart-2: #83c1e3;
  --chart-3: #9bd3f0;
  --chart-4: #e9f0f4;
  --chart-5: #e0ac75;
  --chart-6: #9db0bb;

  --x-marine: #050d14;
  --x-marine-ink: #eaf3f8;
  --x-marine-line: #1f3646;
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

/* The trust band — the one dark statement band, a register apart from the
   brand-blue hero and closing bands. Reads its own --x- tokens. */
.band-marine {
  background: var(--x-marine);
  color: var(--x-marine-ink);
}

.stat {
  border-top: 1px solid var(--x-marine-line);
  padding-top: 1.25rem;
}

.stat-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--x-marine-ink) 68%, transparent);
  letter-spacing: 0.03em;
}