/* ==========================================================================
   Design tokens — Teacher Manager
   One source of truth for color, type, spacing, radius and elevation.
   --tm-primary-rgb is injected per deployment from TeacherSettings (branding),
   every other brand shade is derived from it, so a teacher's color change
   re-themes the whole app.
   ========================================================================== */

:root {
  /* ---- Brand (overridden inline by the branding context processor) ---- */
  --tm-primary-rgb: 211, 114, 69;
  --tm-primary: rgb(var(--tm-primary-rgb));
  --tm-primary-50: color-mix(in srgb, var(--tm-primary) 8%, #fff);
  --tm-primary-100: color-mix(in srgb, var(--tm-primary) 16%, #fff);
  --tm-primary-200: color-mix(in srgb, var(--tm-primary) 32%, #fff);
  --tm-primary-300: color-mix(in srgb, var(--tm-primary) 52%, #fff);
  /* 600+ are for text/filled buttons: white on 500 is ~3.3:1 (fails AA), 600 is ~4.6:1 */
  --tm-primary-600: color-mix(in srgb, var(--tm-primary) 86%, #000);
  --tm-primary-700: color-mix(in srgb, var(--tm-primary) 72%, #000);
  --tm-primary-800: color-mix(in srgb, var(--tm-primary) 58%, #000);

  /* ---- Neutrals (warm, to sit well next to the terracotta brand) ---- */
  --tm-bg: #f7f5f3;
  --tm-surface: #ffffff;
  --tm-surface-2: #fbfaf9;
  --tm-border: #e8e3df;
  --tm-border-strong: #d6cfc9;
  --tm-text: #1f1a17;
  --tm-text-muted: #6b625c;
  --tm-text-subtle: #8f8680;
  --tm-ink: #2a2421; /* dark surfaces: sidebar, projector screen */

  /* ---- Semantic ---- */
  --tm-success: #1f7a50;
  --tm-success-bg: #e5f3ec;
  --tm-warning: #9a5b00;
  --tm-warning-bg: #fcf1dc;
  --tm-danger: #b42f22;
  --tm-danger-bg: #fbe8e5;
  --tm-info: #22599a;
  --tm-info-bg: #e7eff9;
  --tm-neutral-bg: #efebe8;

  /* ---- Typography ---- */
  --tm-font: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-font-num: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --tm-text-xs: 0.75rem;   /* 12 */
  --tm-text-sm: 0.875rem;  /* 14 */
  --tm-text-md: 1rem;      /* 16 */
  --tm-text-lg: 1.25rem;   /* 20 */
  --tm-text-xl: 1.5rem;    /* 24 */
  --tm-text-2xl: 2rem;     /* 32 */
  --tm-text-display: 3.5rem; /* projector counters */

  /* ---- Spacing (4px grid) ---- */
  --tm-space-1: 4px;
  --tm-space-2: 8px;
  --tm-space-3: 12px;
  --tm-space-4: 16px;
  --tm-space-5: 24px;
  --tm-space-6: 32px;
  --tm-space-7: 48px;

  /* ---- Radius ---- */
  --tm-radius-sm: 8px;
  --tm-radius-md: 12px;
  --tm-radius-lg: 16px;
  --tm-radius-pill: 999px;

  /* ---- Elevation ---- */
  --tm-shadow-1: 0 1px 2px rgba(31, 26, 23, 0.06), 0 1px 3px rgba(31, 26, 23, 0.04);
  --tm-shadow-2: 0 8px 24px rgba(31, 26, 23, 0.10), 0 2px 6px rgba(31, 26, 23, 0.06);

  /* ---- Layout ---- */
  --tm-sidebar-w: 248px;
  --tm-topbar-h: 60px;
  --tm-bottomnav-h: 64px;
  --tm-tap: 44px; /* minimum touch target */
}