:root {
  /* Typography */
  --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-h1: 28px;
  --text-h2: 22px;
  --text-h3: 19px;
  --text-h4: 17px;
  --text-h5: 15px;
  --text-h6: 13px;
  --text-md: 15px;
  --text-base: 14px;
  --text-sm: 12px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-6: 12px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;

  /* Radius — sharper, more "document" than the LMS system's rounder scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-control: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Control heights — every button/input snaps to one of these three */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;

  /* Neutral scale — cool slate, distinct from the LMS purple-neutral scale */
  --neutral-100: #0f172a;
  --neutral-90: #1e293b;
  --neutral-80: #334155;
  --neutral-70: #475569;
  --neutral-60: #64748b;
  --neutral-50: #94a3b8;
  --neutral-40: #cbd5e1;
  --neutral-30: #e2e8f0;
  --neutral-20: #eef2f6;
  --neutral-10: #f8fafc;

  /* Brand — teal, flat (no gradient) */
  --color-primary-400: #475569;
  --color-primary-500: #334155;
  --color-primary-600: #334155;
  --color-primary-gradient: var(--color-primary-500);

  /* Semantic status — kept distinct from the teal accent */
  --color-success: #15803d;
  --color-success-bg: #ecfdf3;
  --color-warning: #b45309;
  --color-warning-bg: #fef6e7;
  --color-danger: #c92a2a;
  --color-danger-bg: #fef2f2;

  /* Icon filters for semantic colors */
  --icon-success: invert(35%) sepia(84%) saturate(525%) hue-rotate(88deg) brightness(104%) contrast(103%);
  --icon-warning: invert(34%) sepia(95%) saturate(1259%) hue-rotate(21deg) brightness(99%) contrast(105%);
  --icon-danger: invert(23%) sepia(75%) saturate(1193%) hue-rotate(340deg) brightness(105%) contrast(100%);

  /* Shadows — flat/bordered by default, shadows only for real elevation (modals, dropdowns) */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.06);
  --shadow-panel: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-btn: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-btn-hover: 0 2px 5px rgba(15,23,42,0.10);
  --sheen: inset 0 1px 0 rgba(255,255,255,0);

  --radius-pill: 999px;

  /* Pastel tag palette (category-style tags, independent of status colors) */
  /* Text colors darkened from the original pastel hue to clear 4.5:1 on their tint bg */
  --tag-violet-bg: #efeafe;
  --tag-violet-text: #6d28d9;
  --tag-orange-bg: #fff1e6;
  --tag-orange-text: #9a3412;
  --tag-blue-bg: #eaf2ff;
  --tag-blue-text: #1d4ed8;
  --tag-green-bg: #e7f7ee;
  --tag-green-text: #15803d;
  --tag-teal-bg: #e2f7f2;
  --tag-teal-text: #0f766e;
  --tag-pink-bg: #fdeaf3;
  --tag-pink-text: #b83280;
  --tag-neutral-bg: var(--neutral-20);
  --tag-neutral-text: var(--neutral-70);
}

:root {
  --bg-app: #ffffff;
  --bg-sidebar: #f8fafc;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-70);
  --text-muted: var(--neutral-60);
  --border-subtle: var(--neutral-20);
  --border-interactive: var(--neutral-30);
  --nav-active-bg: #f3f4f9;
  --nav-text: var(--neutral-70);
  --nav-text-active: var(--neutral-100);
  --color-primary-100: #e6fbf7;
  --focus-ring: #334155;
  --btn-primary-bg: #111827;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #000000;
  --btn-primary-gradient: linear-gradient(180deg, #2B2B2B 0%, #001027 100%);
  --btn-primary-shadow: 0 1px 0 0 rgba(255,255,255,0.20) inset, 0 0 0 1px rgba(0,0,0,0.15);
  --avatar-ring: #ffffff;
}