/* Equipment Borrowing System — design tokens.
   ------------------------------------------------------------------
   Copied from dls-class-planner's css/tokens.css (docs/architecture.md
   § Design System) with one change: that file had a 3-language colour
   trio (Thai/English/Chinese) marking which team owns a class — this
   app has no such dimension, so it's dropped entirely. Equipment status
   (available/borrowed/maintenance/retired) reuses the existing semantic
   tokens below instead of needing new ones:

     available   (ว่าง)        → --ok / --ok-bg / --ok-ring
     borrowed    (ถูกยืม)      → --ink-2 / --surface-3 / --line-strong (neutral, not alarming)
     maintenance (ซ่อมบำรุง)   → --warn / --warn-bg / --warn-ring
     retired     (เลิกใช้งาน)  → --muted / --surface-2 / --line

   Register: product UI (a tool staff work inside), not a brand page.
   App-level chrome (buttons, tabs, focus rings) always uses graphite
   ink (--accent), never a status colour — so "save" never looks like
   it belongs to one equipment state.

   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 status colour ───────────── */
  --accent: #0f172a;
  --accent-hover: #263449;
  --accent-ink: #ffffff;
  --ring: #0f172a;

  /* ── Semantic state ──────────────────────────────────────────── */
  --warn: #92400e; /* warning text */
  --warn-strong: #78350f;
  --warn-solid: #b45309; /* warning tag, white text */
  --warn-bg: #fffbeb;
  --warn-ring: #fcd34d;
  --ok: #166534; /* available equipment */
  --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;
  --z-sidebar: 15;
  --z-header: 20;
  --z-float: 30;
  --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);
}