/* DLS Class Planner — design system + all styles.
   ------------------------------------------------------------------
   Register: product UI (a tool staff work inside), not a brand page.
   The interface should disappear into the task: spot a room clash in
   one second, tick attendance without thinking.

   Two rules hold this file together:

   1. The three language colours (Thai amber, English blue, Chinese red)
      are the ONLY colours that carry meaning. They mark which team owns
      a class. They are never decoration.
   2. Everything the APP itself does — primary buttons, the selected tab,
      focus rings, checkboxes — uses graphite ink, never a language
      colour. Otherwise "save" would look like it belongs to English.

   Every colour pair below meets WCAG AA (4.5:1 for text, 3:1 for
   marks). Muted grey is deliberately darker than the usual "elegant"
   light grey; readable beats delicate. */

:root {
  color-scheme: light;

  /* ── Neutrals ────────────────────────────────────────────────── */
  --ink: #0f172a; /* headings, primary text */
  --ink-2: #1e293b; /* body text */
  --muted: #475569; /* secondary text — 7:1 on white */
  --line: #e2e8f0; /* hairlines */
  --line-strong: #cbd5e1; /* dividers that must be seen */
  --bg: #f1f5f994; /* page */
  --surface: #ffffff; /* cards, panels */
  --surface-2: #f8fafc; /* table headers, toolbars */
  --surface-3: #eef2f7; /* pressed / hover on neutral */

  /* ── App accent — deliberately NOT a language colour ─────────── */
  --accent: #0f172a;
  --accent-hover: #263449;
  --accent-ink: #ffffff;
  --ring: #0f172a;

  /* ── Language: Thai ──────────────────────────────────────────── */
  --thai-bg: #fef3c7; /* tint behind a Thai class */
  --thai-ring: #fcd34d; /* its border */
  --thai-mark: #d97706; /* the dot — 3.3:1 on white */
  --thai-solid: #b45309; /* filled chip, white text — 4.9:1 */
  --thai-title: #78350f; /* class name on tint */
  --thai-meta: #92400e; /* teacher + count on tint */

  /* ── Language: English ───────────────────────────────────────── */
  --eng-bg: #dbeafe;
  --eng-ring: #93c5fd;
  --eng-mark: #2563eb;
  --eng-solid: #1d4ed8;
  --eng-title: #1e3a8a;
  --eng-meta: #1e40af;

  /* ── Language: Chinese ───────────────────────────────────────── */
  --chi-bg: #fee2e2;
  --chi-ring: #fca5a5;
  --chi-mark: #dc2626;
  --chi-solid: #b91c1c;
  --chi-title: #7f1d1d;
  --chi-meta: #991b1b;

  /* ── Semantic state ──────────────────────────────────────────── */
  --warn: #92400e; /* warning text */
  --warn-strong: #78350f;
  --warn-solid: #b45309; /* warning tag, white text */
  --warn-bg: #fffbeb;
  --warn-ring: #fcd34d;
  --ok: #166534; /* free room, assigned */
  --ok-bg: #dcfce7;
  --ok-ring: #86efac;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;

  /* ── Type scale — fixed rem, ratio ≈1.15. Product UI, not a hero */
  --fs-xs: 0.6875rem; /* 11px — tags */
  --fs-sm: 0.75rem; /* 12px — labels, meta */
  --fs-base: 0.8125rem; /* 13px — table body, dense UI */
  --fs-md: 0.875rem; /* 14px — controls, prose */
  --fs-lg: 1rem; /* 16px — panel titles */
  --fs-xl: 1.125rem; /* 18px — section titles */
  --fs-2xl: 1.375rem; /* 22px — login wordmark */

  /* ── Spacing — 4px base ──────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ── Sidebar widths (rail = collapsed, panel = open) ─────────────── */
  --rail-w: 60px;
  --panel-w: 232px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 999px;

  /* ── Elevation — borders do the work, shadows only lift ──────── */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-2: 0 4px 12px rgba(15, 23, 42, 0.08);
  --sh-3: 0 16px 40px rgba(15, 23, 42, 0.18);

  /* ── z-index — named layers, never 9999 ──────────────────────── */
  --z-sticky: 10; /* sticky table headers / first columns */
  --z-sidebar: 15; /* sidebar fly-out must cover sticky table columns */
  --z-header: 20;
  --z-backdrop: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* ── Motion — users are mid-task; nothing waits on choreography */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}