/* ExamActive Design Tokens */
/* Converted from Educlass Design System (design-tokens.json) */
/* Source: https://design-tokens.org/schema.json */

:root {
  /* ========================================
     GLOBAL TOKENS
     ======================================== */
  
  /* Breakpoints (px) */
  --breakpoint-xs: 360px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Grid System */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-margin: 24px;
  --grid-max-width: 1280px;

  /* Spacing Scale (px) */
  --spacing-0: 0px;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 8px;
  --spacing-4: 12px;
  --spacing-5: 16px;
  --spacing-6: 20px;
  --spacing-7: 24px;
  --spacing-8: 32px;
  --spacing-9: 40px;
  --spacing-10: 48px;
  --spacing-11: 56px;
  --spacing-12: 64px;

  /* Border Radius (px) */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Border Width (px) */
  --border-hairline: 0.5px;
  --border-sm: 1px;
  --border-md: 2px;

  /* Opacity */
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-40: 0.4;
  --opacity-60: 0.6;
  --opacity-80: 0.8;
  --opacity-100: 1.0;

  /* Z-Index Layers */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 80;
  --z-toast: 100;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-sans-primary: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-numeric-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* Font Sizes (px) */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.33;
  --line-height-normal: 1.5;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Letter Spacing (px) */
  --letter-spacing-tight: -0.2px;
  --letter-spacing-normal: 0px;
  --letter-spacing-wide: 0.2px;

  /* ========================================
     COLOR PALETTE
     ======================================== */

  /* Neutral Colors (11 shades) */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F2F4F7;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;

  /* Primary Colors (Educlass Blue - 10 shades) */
  --color-primary-50: #EEF6FF;
  --color-primary-100: #D9ECFF;
  --color-primary-200: #B7D7FF;
  --color-primary-300: #8ABEFF;
  --color-primary-400: #5AA3FF;
  --color-primary-500: #2F85FF;
  --color-primary-600: #1E6CE0;
  --color-primary-700: #1554B3;
  --color-primary-800: #0E3D86;
  --color-primary-900: #082858;

  /* Accent A (Success Green) */
  --color-accentA-100: #EAFBF1;
  --color-accentA-300: #7ADFA6;
  --color-accentA-500: #22C55E;
  --color-accentA-600: #16A34A;
  --color-accentA-700: #16A34A;

  /* Accent B (Warning Orange) */
  --color-accentB-100: #FFF4E5;
  --color-accentB-300: #FFC275;
  --color-accentB-500: #FB923C;
  --color-accentB-700: #EA580C;

  /* Danger (Error Red) */
  --color-danger-100: #FEECEC;
  --color-danger-300: #F68A8A;
  --color-danger-500: #EF4444;
  --color-danger-600: #DC2626;
  --color-danger-700: #DC2626;

  /* Info (Blue) */
  --color-info-100: #E8F5FF;
  --color-info-300: #7CC5FF;
  --color-info-500: #3B82F6;
  --color-info-600: #2563EB;
  --color-info-700: #2563EB;

  /* ========================================
     ROLE-BASED COLORS (Multi-Role Support)
     ======================================== */

  /* Role Primary Colors */
  --color-role-teacher: #2F85FF;   /* Primary Blue */
  --color-role-student: #22C55E;   /* Accent A Green */
  --color-role-admin: #845EF7;     /* Purple (dataViz.4) */
  --color-role-parent: #FB923C;    /* Accent B Orange */

  /* Backward Compatibility Aliases */
  --color-success-100: var(--color-accentA-100);
  --color-success-300: var(--color-accentA-300);
  --color-success-500: var(--color-accentA-500);
  --color-success-600: var(--color-accentA-600);
  --color-success-700: var(--color-accentA-700);

  --color-warning-100: var(--color-accentB-100);
  --color-warning-300: var(--color-accentB-300);
  --color-warning-500: var(--color-accentB-500);
  --color-warning-700: var(--color-accentB-700);

  /* ========================================
     SEMANTIC COLOR ROLES
     ======================================== */

  /* Background Colors */
  --color-bg-page: var(--color-neutral-50);
  --color-bg-surface: var(--color-neutral-0);
  --color-bg-subtle: var(--color-neutral-100);

  /* Text Colors */
  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-0);

  /* Border Colors */
  --color-border-subtle: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);

  /* Brand Colors */
  --color-brand-primary: var(--color-primary-600);
  --color-brand-primary-contrast: var(--color-neutral-0);

  /* Status Colors */
  --color-accent-positive: var(--color-accentA-600);
  --color-accent-caution: var(--color-accentB-700);
  --color-status-error: var(--color-danger-600);
  --color-status-info: var(--color-info-600);

  /* Chart Colors */
  --color-chart-grid: var(--color-neutral-200);

  /* State Colors */
  --color-hover-overlay: rgba(0, 0, 0, 0.06);
  --color-active-overlay: rgba(0, 0, 0, 0.10);
  --color-focus-ring: var(--color-primary-300);
  --color-disabled-opacity: 0.5;

  /* ========================================
     ELEVATION (SHADOWS)
     ======================================== */

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* ========================================
     MOTION & ANIMATION
     ======================================== */

  /* Duration (ms) */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Easing Functions */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);

  /* ========================================
     COMPONENT TOKENS
     ======================================== */

  /* AppShell (Layout) */
  --topbar-height: 64px;
  --school-bar-height: 48px;
  --total-header-height: 112px;
  --sidebar-width-expanded: 280px;
  --sidebar-width-collapsed: 64px;
  --sidebar-item-height: 44px;
  --sidebar-item-radius: var(--radius-md);
  --sidebar-item-active-bg: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);

  /* Button */
  --button-height-sm: 36px;
  --button-height-md: 40px;
  --button-height-lg: 48px;
  --button-padding-x-sm: 12px;
  --button-padding-x-md: 16px;
  --button-padding-x-lg: 20px;
  --button-radius: var(--radius-md);
  --button-font-family: var(--font-sans-primary);
  --button-font-weight: var(--font-weight-semibold);

  /* Button Variants */
  --button-primary-bg: var(--color-brand-primary);
  --button-primary-text: var(--color-brand-primary-contrast);
  --button-primary-border: transparent;
  
  --button-secondary-bg: color-mix(in srgb, var(--color-brand-primary) 10%, var(--color-bg-surface));
  --button-secondary-text: var(--color-brand-primary);
  --button-secondary-border: var(--color-border-subtle);
  
  --button-ghost-bg: transparent;
  --button-ghost-text: var(--color-text-primary);
  --button-ghost-border: transparent;

  /* Input */
  --input-height: 40px;
  --input-radius: var(--radius-md);
  --input-bg: var(--color-bg-surface);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-secondary);
  --input-border: var(--color-border-subtle);
  --input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 35%, transparent);

  /* Card */
  --card-bg: var(--color-bg-surface);
  --card-radius: var(--radius-lg);
  --card-padding: var(--spacing-8);
  --card-shadow: var(--shadow-md);
  --card-border: var(--color-border-subtle);
  --card-header-gap: var(--spacing-4);

  /* Badge */
  --badge-radius: var(--radius-full);
  --badge-padding-x: 10px;
  --badge-height: 24px;
  
  --badge-info-bg: var(--color-info-100);
  --badge-info-text: var(--color-info-700);
  --badge-success-bg: var(--color-accentA-100);
  --badge-success-text: var(--color-accentA-700);
  --badge-warning-bg: var(--color-accentB-100);
  --badge-warning-text: var(--color-accentB-700);
  --badge-error-bg: var(--color-danger-100);
  --badge-error-text: var(--color-danger-700);

  /* Tabs */
  --tabs-height: 40px;
  --tabs-indicator-height: 2px;
  --tabs-indicator-color: var(--color-brand-primary);
  --tabs-radius: var(--radius-md);
  --tabs-spacing: var(--spacing-6);

  /* Table */
  --table-row-height: 48px;
  --table-header-bg: var(--color-bg-subtle);
  --table-row-hover-bg: color-mix(in srgb, var(--color-brand-primary) 4%, transparent);
  --table-grid-color: var(--color-border-subtle);
  --table-radius: var(--radius-md);
  --table-cell-padding-x: 16px;

  /* Progress Bar */
  --progress-height: 8px;
  --progress-radius: var(--radius-full);
  --progress-track: var(--color-bg-subtle);
  --progress-bar: var(--color-brand-primary);

  /* KPI Tile */
  --kpi-radius: var(--radius-lg);
  --kpi-padding: var(--spacing-7);
  --kpi-value-font: var(--font-numeric-mono);
  --kpi-trend-up: var(--color-accentA-600);
  --kpi-trend-down: var(--color-danger-600);

  /* Sidebar Nav Item */
  --sidebar-nav-item-height: 44px;
  --sidebar-nav-item-radius: var(--radius-md);
  --sidebar-nav-item-active-bg: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
  --sidebar-nav-item-active-text: var(--color-brand-primary);
  --sidebar-nav-item-icon-size: 18px;
  --sidebar-nav-item-gap: 12px;

  /* Avatar */
  --avatar-xs: 20px;
  --avatar-sm: 28px;
  --avatar-md: 36px;
  --avatar-lg: 48px;
  --avatar-radius: var(--radius-full);
  --avatar-initials-weight: var(--font-weight-semibold);

  /* Modal */
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-lg);
  --modal-backdrop: rgba(17, 24, 39, 0.45);
  --modal-padding: var(--spacing-8);
  --modal-max-width: 720px;

  /* Tooltip */
  --tooltip-bg: var(--color-neutral-900);
  --tooltip-text: var(--color-neutral-0);
  --tooltip-radius: var(--radius-sm);
  --tooltip-padding-y: 6px;
  --tooltip-padding-x: 10px;

  /* ========================================
     DATA VISUALIZATION
     ======================================== */

  /* Series Palette */
  --dataviz-series-1: #2F85FF;
  --dataviz-series-2: #22C55E;
  --dataviz-series-3: #FB923C;
  --dataviz-series-4: #845EF7;
  --dataviz-series-5: #06B6D4;
  --dataviz-series-6: #E879F9;
  --dataviz-series-7: #94A3B8;
  --dataviz-series-8: #10B981;

  /* Chart Settings */
  --dataviz-area-opacity: 0.18;
  --dataviz-bar-radius: 8px;
  --dataviz-grid-x: var(--color-chart-grid);
  --dataviz-grid-y: var(--color-chart-grid);

  /* Axis */
  --dataviz-axis-label-color: var(--color-text-secondary);
  --dataviz-axis-label-size: var(--font-size-sm);
  --dataviz-axis-tick-width: var(--border-hairline);

  /* Chart Tooltip */
  --dataviz-tooltip-bg: var(--color-bg-surface);
  --dataviz-tooltip-text: var(--color-text-primary);
  --dataviz-tooltip-shadow: var(--shadow-sm);
  --dataviz-tooltip-radius: var(--radius-md);
  --dataviz-tooltip-border: var(--color-border-subtle);

  /* ========================================
     PATTERNS & LAYOUTS
     ======================================== */

  /* Hero Section */
  --hero-max-width: 1040px;
  --hero-title-size: var(--font-size-5xl);
  --hero-subtitle-size: var(--font-size-lg);
  --hero-actions-gap: var(--spacing-6);

  /* Dashboard */
  --dashboard-tile-gap: var(--spacing-7);
  --dashboard-section-gap: var(--spacing-9);
  --dashboard-card-min-height: 220px;

  /* Empty State */
  --empty-icon-size: 64px;
  --empty-title-size: var(--font-size-xl);
  --empty-text-color: var(--color-text-secondary);
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page: var(--color-neutral-900);
    --color-bg-surface: var(--color-neutral-800);
    --color-bg-subtle: var(--color-neutral-700);
    --color-text-primary: var(--color-neutral-0);
    --color-text-secondary: var(--color-neutral-300);
    --color-border-subtle: var(--color-neutral-700);
    --color-border-strong: var(--color-neutral-600);
    --color-chart-grid: var(--color-neutral-700);
  }
}

/* Dark mode class override (manual toggle) */
.dark {
  --color-bg-page: var(--color-neutral-900);
  --color-bg-surface: var(--color-neutral-800);
  --color-bg-subtle: var(--color-neutral-700);
  --color-text-primary: var(--color-neutral-0);
  --color-text-secondary: var(--color-neutral-300);
  --color-border-subtle: var(--color-neutral-700);
  --color-border-strong: var(--color-neutral-600);
  --color-chart-grid: var(--color-neutral-700);
}