/* ==========================================================================
   AIT SchoolOS — Design Tokens (Light & Dark themes)
   Apple HIG design system variables. Loaded before styles.css.
   ========================================================================== */
    :root {
      /* Typography Stack - Pure Apple System Standard */
      --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "Inter", -system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Inter", -system-ui, sans-serif;
      --font-mono: "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

      /* Spatial & Layout Variables */
      --rail-width: 52px;
      --sidebar-width: 256px;
      --topbar-height: 52px;
      --radius-xs: 4px;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 20px;
      --radius-pill: 9999px;

      /* Spring Transitions (Apple Standard Physics) */
      --spring-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
      --spring-normal: 260ms cubic-bezier(0.16, 1, 0.3, 1);
      --spring-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
      --spring-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

      /* Accent Palette */
      --apple-blue: #0A84FF;
      --apple-purple: #BF5AF2;
      --apple-indigo: #5E5CE6;
      --apple-emerald: #30D158;
      --apple-amber: #FF9F0A;
      --apple-rose: #FF375F;
      --apple-cyan: #64D2FF;
      --apple-slate: #98989D;
      --apple-accent: var(--apple-blue);
      --apple-accent-soft: rgba(10, 132, 255, 0.12);
      --apple-accent-glow: rgba(10, 132, 255, 0.35);

      /* Dark Theme (Default macOS/iOS Cupertino Dark) */
      --bg-canvas: #0D0E11;
      --bg-rail: rgba(18, 19, 24, 0.82);
      --bg-sidebar: rgba(22, 24, 30, 0.78);
      --bg-card: rgba(30, 33, 42, 0.65);
      --bg-card-hover: rgba(38, 42, 53, 0.85);
      --bg-surface: rgba(22, 24, 30, 0.78);
      --bg-surface-elevated: #1F222B;
      --bg-surface-solid: #191B22;
      --bg-subtle: rgba(255, 255, 255, 0.05);
      --bg-muted: rgba(255, 255, 255, 0.08);
      --bg-input: rgba(255, 255, 255, 0.07);
      --bg-switch-off: #3A3D46;

      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-vibrant: rgba(255, 255, 255, 0.15);
      --border-active: var(--apple-accent);

      --text-primary: #FFFFFF;
      --text-secondary: #98989D;
      --text-tertiary: #636366;
      --text-placeholder: #48484A;

      --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
      --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
      --shadow-window: 0 24px 64px -8px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.15);
      --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.35);

      --glass-blur: blur(24px) saturate(190%);
      --container-max: 1200px;
    }

    [data-theme="light"] {
      /* Light Theme (Apple Sonoma / iOS Light Mode) */
      --bg-canvas: #F5F5F7;
      --bg-rail: rgba(235, 236, 240, 0.85);
      --bg-sidebar: rgba(242, 243, 247, 0.85);
      --bg-card: rgba(255, 255, 255, 0.85);
      --bg-card-hover: #FFFFFF;
      --bg-surface: rgba(245, 245, 247, 0.85);
      --bg-surface-elevated: #FFFFFF;
      --bg-surface-solid: #FFFFFF;
      --bg-subtle: rgba(0, 0, 0, 0.035);
      --bg-muted: rgba(0, 0, 0, 0.06);
      --bg-input: rgba(0, 0, 0, 0.05);
      --bg-switch-off: #E5E5EA;

      --border-subtle: rgba(0, 0, 0, 0.08);
      --border-vibrant: rgba(0, 0, 0, 0.14);
      --border-active: #007AFF;

      --text-primary: #1C1C1E;
      --text-secondary: #636366;
      --text-tertiary: #8E8E93;
      --text-placeholder: #AEAEB2;

      --apple-blue: #007AFF;
      --apple-accent: #007AFF;
      --apple-accent-soft: rgba(0, 122, 255, 0.09);
      --apple-accent-glow: rgba(0, 122, 255, 0.25);

      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
      --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.12);
      --shadow-window: 0 20px 56px -6px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.12);
      --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px rgba(0, 0, 0, 0.05);

      --glass-blur: blur(24px) saturate(180%);
    }