/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Edyou Modern Learning Platform
   Adapted from Stitch Design System (Academic Precision)
   ═══════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-primary: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', 'Geist', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.84375rem;  /* 13.5px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-md: 1rem;        /* 16px */
  --fs-lg: 1.1875rem;   /* 19px */
  --fs-xl: 1.4375rem;   /* 23px */
  --fs-2xl: 1.875rem;   /* 30px */
  --fs-3xl: 2.375rem;   /* 38px */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.2;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  /* ── Spacing (8px grid scale) ── */
  --sp-1: 0.25rem;  /* 4px */
  --sp-2: 0.5rem;   /* 8px */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.25rem;  /* 20px */
  --sp-6: 1.5rem;   /* 24px */
  --sp-8: 2rem;     /* 32px */
  --sp-10: 2.5rem;  /* 40px */
  --sp-12: 3rem;    /* 48px */
  --sp-16: 4rem;    /* 64px */

  /* ── Borders & Radii ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* ── Transitions & Animation Curves ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 380ms;
  --duration-page: 280ms;

  /* ── Z-indices ── */
  --z-drawer-overlay: 900;
  --z-drawer: 950;
  --z-app-bar: 100;
  --z-bottom-nav: 100;
  --z-fab: 850;
  --z-modal-overlay: 1000;
  --z-modal: 1010;
  --z-toast: 1100;

  /* ── Layout Dimensions ── */
  --app-bar-height: 60px;
  --bottom-nav-height: 68px;
  --drawer-width: 290px;
  --max-content-width: 1180px;
  --sidebar-width: 270px;
  --sidebar-collapsed-width: 72px;
}

/* ═══════════════════════════════════════
   DARK THEME (Default)
   Sleek Deep Charcoal with High-Fidelity Accents
   ═══════════════════════════════════════ */
[data-theme="dark"] {
  --color-primary: #2976c7;
  --color-primary-hover: #3b89dc;
  --color-primary-dim: rgba(41, 118, 199, 0.16);
  --color-secondary: #748aa6;
  --color-tertiary: #8455ef;

  --color-bg: #0e1217;
  --color-surface: #161b22;
  --color-surface-variant: #1f2631;
  --color-surface-hover: #262e3b;
  --color-surface-elevated: #212936;

  --color-on-bg: #f3f6fa;
  --color-on-surface: #f3f6fa;
  --color-on-primary: #ffffff;
  --color-text: #f3f6fa;
  --color-text-secondary: rgba(243, 246, 250, 0.72);
  --color-text-tertiary: rgba(243, 246, 250, 0.48);
  --color-text-disabled: rgba(243, 246, 250, 0.28);

  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-focus: var(--color-primary);
  --color-divider: rgba(255, 255, 255, 0.07);

  --color-success: #10b981;
  --color-error: #f43f5e;
  --color-warning: #f59e0b;
  --color-info: var(--color-primary);

  --color-input-bg: #1f2631;
  --color-input-border: rgba(255, 255, 255, 0.14);
  --color-input-focus: var(--color-primary);

  --color-card-bg: var(--color-surface);
  --color-card-border: rgba(255, 255, 255, 0.08);

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-elevated: 0 10px 32px rgba(0, 0, 0, 0.42);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.55);

  --color-skeleton-base: #1a212b;
  --color-skeleton-shine: #293444;

  --gradient-primary: linear-gradient(135deg, #1e88e5, #005da7);
  --gradient-header: linear-gradient(135deg, #131922, #1b2432);
  --gradient-accent: linear-gradient(135deg, #8455ef, #2976c7);
}

/* ═══════════════════════════════════════
   LIGHT THEME
   Crisp Surface-BG with Academic Precision
   ═══════════════════════════════════════ */
[data-theme="light"] {
  --color-primary: #005da7;
  --color-primary-hover: #004d8c;
  --color-primary-dim: rgba(0, 93, 167, 0.1);
  --color-secondary: #565e74;
  --color-tertiary: #6b38d4;

  --color-bg: #f8f9ff;
  --color-surface: #ffffff;
  --color-surface-variant: #f0f4ff;
  --color-surface-hover: #e5eeff;
  --color-surface-elevated: #ffffff;

  --color-on-bg: #0b1c30;
  --color-on-surface: #0b1c30;
  --color-on-primary: #ffffff;
  --color-text: #0b1c30;
  --color-text-secondary: #414751;
  --color-text-tertiary: #717783;
  --color-text-disabled: #a8afba;

  --color-border: #dce4f2;
  --color-border-focus: var(--color-primary);
  --color-divider: #eef2fa;

  --color-success: #059669;
  --color-error: #e11d48;
  --color-warning: #d97706;
  --color-info: var(--color-primary);

  --color-input-bg: #f3f6fc;
  --color-input-border: #d0d9e8;
  --color-input-focus: var(--color-primary);

  --color-card-bg: var(--color-surface);
  --color-card-border: #e6edf8;

  --shadow-card: 0 2px 10px rgba(11, 28, 48, 0.05);
  --shadow-elevated: 0 10px 30px rgba(11, 28, 48, 0.09);
  --shadow-modal: 0 20px 50px rgba(11, 28, 48, 0.16);

  --color-skeleton-base: #e8eef8;
  --color-skeleton-shine: #f6f9ff;

  --gradient-primary: linear-gradient(135deg, #005da7, #2976c7);
  --gradient-header: linear-gradient(135deg, #003e73, #005da7);
  --gradient-accent: linear-gradient(135deg, #6b38d4, #005da7);
}