/*
 * theme.css — Bright Minds Tuition, Bhopal.
 *
 * The look: a warm paper ground with a deep saffron-terracotta brand and a
 * serif display face — a printed school prospectus rather than an ed-tech
 * dashboard. Opens light, because parents read it in daylight on a phone.
 * Dark mode is its own palette: a warm near-black with a lighter saffron.
 *
 * Five colours in total: paper, warm near-black ink, saffron brand, a
 * neutral warm grey, and a supporting green used only for confirmations.
 */

:root {
  --canvas: #fbf7f0;
  --surface: #ffffff;
  --surface-2: #f3ece1;
  --border: #e3d8c7;
  --border-strong: #c2b29a;
  --ink: #21201c;
  --muted: #6a645a;
  --accent: #c0410b;
  --accent-hover: #a2360a;
  --accent-ink: #ffffff;
  --accent-text: #9a3609;
  --accent-strong: #8a300a;
  --accent-soft: #f7e7d9;
  --accent-border: #e2c3a8;
  --success: #0f6d3f;
  --success-ink: #ffffff;
  --success-soft: #e1efe5;
  --success-strong: #0c5c35;
  --warning: #a85b00;
  --warning-ink: #ffffff;
  --warning-soft: #f7ead5;
  --warning-strong: #8a4a00;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f7e1de;
  --danger-strong: #9b1f18;
  --chart-1: #c0410b;
  --chart-2: #0f6d3f;
  --chart-3: #8a4a00;
  --chart-4: #4c5f7a;
  --chart-5: #7a4a6a;
  --chart-6: #6a645a;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.015em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 10px;
  --radius-card: 16px;
  --radius-input: 10px;
  --border-w: 1px;
  --border-strong-w: 2px;
  --shadow-card: 0 1px 2px rgb(33 32 28 / 0.06), 0 8px 24px rgb(33 32 28 / 0.05);
  --shadow-raised: 0 2px 4px rgb(33 32 28 / 0.08), 0 16px 40px rgb(33 32 28 / 0.08);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --btn-weight: 600;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #14120e;
  --surface: #1e1b16;
  --surface-2: #26221b;
  --border: #332e25;
  --border-strong: #57503f;
  --ink: #f5efe4;
  --muted: #ada595;
  --accent: #f0873c;
  --accent-hover: #ff9a55;
  --accent-ink: #1a1206;
  --accent-text: #f2a868;
  --accent-strong: #f2b27c;
  --accent-soft: #33251a;
  --accent-border: #4a3524;
  --success: #2e9e63;
  --success-ink: #07170e;
  --success-soft: #14271b;
  --success-strong: #7fcb9c;
  --warning: #d08a3a;
  --warning-ink: #1c1206;
  --warning-soft: #2e2213;
  --warning-strong: #e7b37a;
  --danger: #d9544a;
  --danger-ink: #1a0a08;
  --danger-soft: #33191a;
  --danger-strong: #f09189;
  --chart-1: #f0873c;
  --chart-2: #2e9e63;
  --chart-3: #d08a3a;
  --chart-4: #8aa3c4;
  --chart-5: #c093b4;
  --chart-6: #ada595;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-raised: 0 2px 4px rgb(0 0 0 / 0.45), 0 16px 40px rgb(0 0 0 / 0.45);
}

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