/*
 * theme.css — Meridian Dental's design-system values.
 *
 * Corporate mood: small corners, one quiet shadow, a single clinical teal.
 * Opens LIGHT. Dark set under html[data-theme="dark"].
 */

:root {
  --canvas: #eff2ef;
  --surface: #f8f9f8;
  --surface-2: #e4e9e6;
  --border: #d7dcd8;
  --border-strong: #b7bfba;
  --ink: #1b2523;
  --muted: #5f6463;

  --accent: #0f6e63;
  --accent-hover: #0c5b52;
  --accent-ink: #ffffff;
  --accent-text: #0f6e63;
  --accent-strong: #0e655b;
  --accent-soft: #dcece9;
  --accent-border: #b9d9d3;

  --success: #1f8a5f;
  --success-ink: #ffffff;
  --success-soft: #dcf0e6;
  --success-strong: #146b48;

  --warning: #b6790f;
  --warning-ink: #ffffff;
  --warning-soft: #f5ecd8;
  --warning-strong: #8f5d0a;

  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f6dedd;
  --danger-strong: #8c1d17;

  --chart-1: #0f6e63;
  --chart-2: #7a8c86;
  --chart-3: #b58a4d;
  --chart-4: #4c6b8a;
  --chart-5: #8a4c6b;
  --chart-6: #5a5f5e;

  --font-display: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 6px;
  --radius-card: 6px;
  --radius-input: 6px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 1px 2px rgba(27, 37, 35, 0.06);
  --shadow-raised: 0 8px 24px rgba(27, 37, 35, 0.14);
  --shadow-btn: none;
  --card-pad: 1.25rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="dark"] {
  --canvas: #101917;
  --surface: #16211e;
  --surface-2: #1c2b27;
  --border: #28372f;
  --border-strong: #3c4f45;
  --ink: #eef2ef;
  --muted: #9fb0a9;

  --accent: #34a897;
  --accent-hover: #3fbfac;
  --accent-ink: #06201b;
  --accent-text: #4fc3b0;
  --accent-strong: #6fd6c4;
  --accent-soft: #163a34;
  --accent-border: #2f5850;

  --success: #34b174;
  --success-ink: #062015;
  --success-soft: #123527;
  --success-strong: #7fe3ac;

  --warning: #d99a3d;
  --warning-ink: #241300;
  --warning-soft: #3a2a12;
  --warning-strong: #f0be74;

  --danger: #e2564a;
  --danger-ink: #230604;
  --danger-soft: #3a1613;
  --danger-strong: #f2938a;

  --chart-1: #34a897;
  --chart-2: #7fa89e;
  --chart-3: #d0a35c;
  --chart-4: #6f93c2;
  --chart-5: #c07fa0;
  --chart-6: #9aa39a;
}

/*
 * 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.
 */