/* ExamActive Design Tokens - EduLearn Design System */
/* Modern Educational Platform with Teal/Orange Color Scheme */
/* Replaces old Blue-based design system */

:root {
  /* ========================================
     PRIMARY COLOR PALETTE - TEAL (Main Brand Color)
     ======================================== */
  
  /* Teal/Green - Primary Brand Color */
  --color-teal-50: #E6F7F4;
  --color-teal-100: #B3E8DE;
  --color-teal-200: #80D9C8;
  --color-teal-300: #4DCAB2;
  --color-teal-400: #3BB89D;
  --color-teal-500: #4A9B8E;   /* Main teal - cards, sections, primary actions */
  --color-teal-600: #3D8275;
  --color-teal-700: #2F6A5C;
  --color-teal-800: #225143;
  --color-teal-900: #14382A;

  /* COMPATIBILITY ALIASES - Map old "primary" blue tokens to teal */
  --color-primary-50: var(--color-teal-50);
  --color-primary-100: var(--color-teal-100);
  --color-primary-200: var(--color-teal-200);
  --color-primary-300: var(--color-teal-300);
  --color-primary-400: var(--color-teal-400);
  --color-primary-500: var(--color-teal-500);
  --color-primary-600: var(--color-teal-600);
  --color-primary-700: var(--color-teal-700);
  --color-primary-800: var(--color-teal-800);
  --color-primary-900: var(--color-teal-900);
  --color-primary: var(--color-teal-500);
  --color-primary-dark: var(--color-teal-600);
  --color-primary-light: var(--color-teal-100);

  /* ========================================
     ACCENT COLOR PALETTE - ORANGE (CTAs & Highlights)
     ======================================== */
  
  /* Orange - Accent/CTA Color */
  --color-orange-50: #FFF8E5;
  --color-orange-100: #FFE8B3;
  --color-orange-200: #FFD780;
  --color-orange-300: #FFC74D;
  --color-orange-400: #FFB71A;
  --color-orange-500: #FFA500;   /* Main orange - CTAs, highlights, important actions */
  --color-orange-600: #E69500;
  --color-orange-700: #CC8400;
  --color-orange-800: #B37300;
  --color-orange-900: #996300;

  /* ========================================
     SEMANTIC COLORS
     ======================================== */
  
  /* Success - Keep Green */
  --color-success-50: #ECFDF5;
  --color-success-100: #D1FAE5;
  --color-success-200: #A7F3D0;
  --color-success-300: #6EE7B7;
  --color-success-400: #34D399;
  --color-success-500: #22C55E;   /* Main success */
  --color-success-600: #16A34A;
  --color-success-700: #15803D;
  --color-success-800: #166534;
  --color-success-900: #14532D;

  /* Warning - Use Orange tones */
  --color-warning-50: var(--color-orange-50);
  --color-warning-100: var(--color-orange-100);
  --color-warning-200: var(--color-orange-200);
  --color-warning-300: var(--color-orange-300);
  --color-warning-400: var(--color-orange-400);
  --color-warning-500: var(--color-orange-500);
  --color-warning-600: var(--color-orange-600);
  --color-warning-700: var(--color-orange-700);
  --color-warning-800: var(--color-orange-800);
  --color-warning-900: var(--color-orange-900);

  /* Danger - Keep Red */
  --color-danger-50: #FEF2F2;
  --color-danger-100: #FEE2E2;
  --color-danger-200: #FECACA;
  --color-danger-300: #FCA5A5;
  --color-danger-400: #F87171;
  --color-danger-500: #EF4444;   /* Main danger */
  --color-danger-600: #DC2626;
  --color-danger-700: #B91C1C;
  --color-danger-800: #991B1B;
  --color-danger-900: #7F1D1D;

  /* Info - Use Teal */
  --color-info-50: var(--color-teal-50);
  --color-info-100: var(--color-teal-100);
  --color-info-200: var(--color-teal-200);
  --color-info-300: var(--color-teal-300);
  --color-info-400: var(--color-teal-400);
  --color-info-500: var(--color-teal-500);
  --color-info-600: var(--color-teal-600);
  --color-info-700: var(--color-teal-700);
  --color-info-800: var(--color-teal-800);
  --color-info-900: var(--color-teal-900);

  /* ========================================
     NEUTRAL COLORS
     ======================================== */
  
  --color-white: #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Text Colors */
  --color-text-primary: #2D3748;    /* Main headings */
  --color-text-secondary: #4A5568;  /* Body text */
  --color-text-muted: #718096;      /* Helper text */
  --color-text-white: #FFFFFF;
  --color-on-surface: var(--color-text-primary);
  --color-muted: var(--color-text-muted);

  /* Background Colors */
  --color-bg-light: #FAFBFC;
  --color-bg-white: #FFFFFF;
  --color-bg-teal-light: #E6F7F4;
  --color-bg-orange-light: #FFF8E5;
  --color-surface-primary: var(--color-white);
  --color-surface-secondary: var(--color-gray-50);

  /* Border Colors */
  --color-border: var(--color-gray-200);
  --color-border-light: var(--color-gray-100);
  --color-border-dark: var(--color-gray-300);

  /* Additional Accent Colors (keep for compatibility) */
  --color-accentA-50: #F0FDF4;
  --color-accentA-100: #DCFCE7;
  --color-accentA-500: #22C55E;
  --color-accentB-100: #DBEAFE;
  --color-accentB-500: #3B82F6;

  /* ========================================
     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;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* Spacing Aliases (EduLearn style) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-12: 96px;

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

  /* Tailwind compatibility aliases — compiled app.min.css references these */
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-xl: var(--radius-xl);
  --border-radius-2xl: var(--radius-2xl);
  --border-radius-full: var(--radius-full);

  /* 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-action-bar: 30;
  --z-overlay: 40;
  --z-sidebar: 50;
  --z-header: 60;
  --z-modal: 80;
  --z-toast: 100;
  --z-loader: 200;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);

  /* ========================================
     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-primary: var(--font-sans-primary);
  --font-display: var(--font-sans-primary);

  /* Font Family Aliases — consumed by app.css (body) and custom-utilities.css */
  --font-family-primary: var(--font-sans-primary);
  --font-family-base: var(--font-sans-primary);
  --font-family-mono: var(--font-numeric-mono);

  /* Font Sizes (px) */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-base: var(--font-size-md); /* alias consumed by app.css body */
  --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;

  /* Font Size Aliases (EduLearn style) */
  --text-xs: var(--font-size-xs);
  --text-sm: var(--font-size-sm);
  --text-base: var(--font-size-md);
  --text-lg: var(--font-size-lg);
  --text-xl: var(--font-size-xl);
  --text-2xl: var(--font-size-2xl);
  --text-3xl: var(--font-size-3xl);
  --text-4xl: var(--font-size-4xl);
  --text-5xl: var(--font-size-5xl);
  --text-6xl: var(--font-size-6xl);

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.33;
  --line-height-normal: 1.5;
  --leading-tight: var(--line-height-tight);
  --leading-normal: var(--line-height-normal);
  --leading-relaxed: 1.75;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --weight-normal: var(--font-weight-regular);
  --weight-medium: var(--font-weight-medium);
  --weight-semibold: var(--font-weight-semibold);
  --weight-bold: var(--font-weight-bold);
  --weight-extrabold: var(--font-weight-extrabold);

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

  /* ========================================
     COMPONENT TOKENS - BUTTONS
     ======================================== */

  /* EduLearn Style Buttons */
  --btn-primary-bg: var(--color-orange-500);
  --btn-primary-hover: var(--color-orange-600);
  --btn-primary-text: var(--color-white);
  --btn-primary-radius: var(--radius-lg);
  --btn-padding-x: 32px;
  --btn-padding-y: 14px;

  --btn-secondary-bg: var(--color-teal-500);
  --btn-secondary-hover: var(--color-teal-600);
  --btn-secondary-text: var(--color-white);

  --btn-outline-border: var(--color-gray-300);
  --btn-outline-text: var(--color-text-primary);
  --btn-outline-hover-bg: var(--color-gray-50);

  /* Traditional Button Tokens (compatibility) */
  --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-primary-bg: var(--color-teal-600);
  --button-primary-text: var(--color-white);
  --button-primary-border: transparent;
  
  --button-secondary-bg: color-mix(in srgb, var(--color-teal-600) 10%, var(--color-white));
  --button-secondary-text: var(--color-teal-600);
  --button-secondary-border: var(--color-border);
  
  --button-ghost-bg: transparent;
  --button-ghost-text: var(--color-text-primary);
  --button-ghost-border: transparent;

  /* ========================================
     COMPONENT TOKENS - CARDS
     ======================================== */

  /* EduLearn Style Cards */
  --card-bg: var(--color-white);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-6);
  --card-shadow: var(--shadow-md);
  --card-border: 1px solid var(--color-gray-200);
  --card-header-gap: var(--spacing-4);

  /* Stats Cards */
  --stat-card-bg: var(--color-white);
  --stat-card-number-color: var(--color-text-primary);
  --stat-card-label-color: var(--color-text-muted);
  --stat-card-icon-bg: var(--color-orange-100);
  --stat-card-icon-color: var(--color-orange-600);

  /* ========================================
     COMPONENT TOKENS - NAVIGATION
     ======================================== */

  /* Top Navigation */
  --nav-height: 80px;
  --nav-bg: var(--color-white);
  --nav-link-color: var(--color-text-secondary);
  --nav-link-hover: var(--color-orange-500);

  /* Sidebar */
  --sidebar-width: 280px;
  --sidebar-width-expanded: 280px;
  --sidebar-width-collapsed: 64px;
  --sidebar-bg: var(--color-white);
  --sidebar-item-active-bg: var(--color-orange-50);
  --sidebar-item-active-color: var(--color-orange-600);
  --sidebar-item-hover-bg: var(--color-gray-50);
  --sidebar-item-height: 44px;
  --sidebar-item-radius: var(--radius-md);
  --sidebar-nav-item-height: 44px;
  --sidebar-nav-item-radius: var(--radius-md);
  --sidebar-nav-item-active-bg: color-mix(in srgb, var(--color-orange-500) 10%, transparent);
  --sidebar-nav-item-active-text: var(--color-orange-600);
  --sidebar-nav-item-icon-size: 18px;
  --sidebar-nav-item-gap: 12px;

  /* AppShell (Layout) */
  --topbar-height: 64px;
  --school-bar-height: 48px;
  --total-header-height: 112px;

  /* ========================================
     COMPONENT TOKENS - BADGES
     ======================================== */

  --badge-radius: var(--radius-full);
  --badge-padding-x: 10px;
  --badge-height: 24px;
  
  --badge-orange-bg: var(--color-orange-500);
  --badge-orange-text: var(--color-white);
  --badge-teal-bg: var(--color-teal-500);
  --badge-teal-text: var(--color-white);
  --badge-gray-bg: var(--color-gray-200);
  --badge-gray-text: var(--color-gray-700);
  
  --badge-info-bg: var(--color-info-100);
  --badge-info-text: var(--color-info-700);
  --badge-success-bg: var(--color-success-100);
  --badge-success-text: var(--color-success-700);
  --badge-warning-bg: var(--color-orange-100);
  --badge-warning-text: var(--color-orange-700);
  --badge-error-bg: var(--color-danger-100);
  --badge-error-text: var(--color-danger-700);

  /* ========================================
     COMPONENT TOKENS - INPUTS & FORMS
     ======================================== */

  --input-height: 40px;
  --input-radius: var(--radius-md);
  --input-bg: var(--color-white);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-secondary);
  --input-border: var(--color-border);
  --input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-teal-500) 35%, transparent);

  /* ========================================
     COMPONENT TOKENS - TABLES
     ======================================== */

  --table-row-height: 48px;
  --table-header-bg: var(--color-gray-50);
  --table-row-hover-bg: color-mix(in srgb, var(--color-teal-500) 4%, transparent);
  --table-grid-color: var(--color-border);
  --table-radius: var(--radius-md);
  --table-cell-padding-x: 16px;

  /* ========================================
     COMPONENT TOKENS - TABS
     ======================================== */

  --tabs-height: 40px;
  --tabs-indicator-height: 2px;
  --tabs-indicator-color: var(--color-teal-600);
  --tabs-radius: var(--radius-md);
  --tabs-spacing: var(--spacing-6);

  /* ========================================
     COMPONENT TOKENS - MODALS & OVERLAYS
     ======================================== */

  --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-bg: var(--color-gray-900);
  --tooltip-text: var(--color-white);
  --tooltip-radius: var(--radius-sm);
  --tooltip-padding-y: 6px;
  --tooltip-padding-x: 10px;

  /* ========================================
     COMPONENT TOKENS - MISC
     ======================================== */

  --progress-height: 8px;
  --progress-radius: var(--radius-full);
  --progress-track: var(--color-gray-100);
  --progress-bar: var(--color-teal-500);

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

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

  /* ========================================
     DECORATIVE ELEMENTS
     ======================================== */

  --arrow-color: var(--color-orange-500);
  --icon-primary: var(--color-teal-500);
  --icon-secondary: var(--color-orange-500);
  --squiggle-color: var(--color-teal-400);
  --squiggle-alt: var(--color-orange-300);

  /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* 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);

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

  /* Series Palette - Updated with Teal/Orange */
  --dataviz-series-1: var(--color-teal-500);    /* Primary - Teal */
  --dataviz-series-2: var(--color-orange-500);  /* Accent - Orange */
  --dataviz-series-3: var(--color-success-500); /* Success - Green */
  --dataviz-series-4: #845EF7;                   /* Purple */
  --dataviz-series-5: #06B6D4;                   /* Cyan */
  --dataviz-series-6: #E879F9;                   /* Pink */
  --dataviz-series-7: #94A3B8;                   /* Gray */
  --dataviz-series-8: #10B981;                   /* Emerald */

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

  /* 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-white);
  --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);

  /* ========================================
     SEMANTIC COLOR ROLES (Compatibility)
     ======================================== */

  --color-bg-page: var(--color-gray-50);
  --color-bg-surface: var(--color-white);
  --color-bg-subtle: var(--color-gray-100);
  --color-text-inverse: var(--color-white);
  --color-border-subtle: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-brand-primary: var(--color-teal-600);
  --color-brand-primary-contrast: var(--color-white);
  --color-accent-positive: var(--color-success-600);
  --color-accent-caution: var(--color-orange-700);
  --color-status-error: var(--color-danger-600);
  --color-status-info: var(--color-info-600);
  --color-chart-grid: var(--color-gray-200);
  --color-hover-overlay: rgba(0, 0, 0, 0.06);
  --color-active-overlay: rgba(0, 0, 0, 0.10);
  --color-focus-ring: var(--color-teal-300);
  --color-disabled-opacity: 0.5;

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

  --color-role-teacher: var(--color-teal-500);   /* Teal */
  --color-role-student: var(--color-success-500); /* Green */
  --color-role-admin: #845EF7;                    /* Purple */
  --color-role-parent: var(--color-orange-500);   /* Orange */

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

  --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-tile-gap: var(--spacing-7);
  --dashboard-section-gap: var(--spacing-9);
  --dashboard-card-min-height: 220px;

  --empty-icon-size: 64px;
  --empty-title-size: var(--font-size-xl);
  --empty-text-color: var(--color-text-secondary);

  /* ========================================
     LEGACY COMPATIBILITY ALIASES
     ======================================== */

  /* Neutral Colors (old naming) */
  --color-neutral-0: var(--color-white);
  --color-neutral-50: var(--color-gray-50);
  --color-neutral-100: var(--color-gray-100);
  --color-neutral-200: var(--color-gray-200);
  --color-neutral-300: var(--color-gray-300);
  --color-neutral-400: var(--color-gray-400);
  --color-neutral-500: var(--color-gray-500);
  --color-neutral-600: var(--color-gray-600);
  --color-neutral-700: var(--color-gray-700);
  --color-neutral-800: var(--color-gray-800);
  --color-neutral-900: var(--color-gray-900);
}

/* ========================================
   MOBILE BROWSER FIX — Keep typed text visible in inputs on phones
   iOS Safari/Chrome force their own colors on form controls when the
   device is in dark mode, which can render typed text invisible.
   These rules are TOP-LEVEL (not nested inside :root) so every mobile
   browser applies them, and they pin FIXED light-scheme colors that do
   NOT flip in dark mode — white background + dark text, always.
   ======================================== */

input,
select,
textarea {
  color-scheme: light;
  background-color: #FFFFFF !important;
  color: #111827 !important; /* fixed dark text — never flips to white in dark mode */
}

/* appearance:none erases the native box + checkmark, so it must NOT
   apply to checkbox/radio — they rely on the built-in rendering. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
}

select option {
  background-color: #FFFFFF;
  color: #111827;
}

/* Ensure placeholder text is visible on mobile */
input::placeholder,
textarea::placeholder {
  color: #6B7280 !important;
  opacity: 1;
}

/* ========================================
   .field FORM CONTROLS — visible boxes on every page
   Blazor CSS isolation stamps the scope attribute ONLY on elements written
   directly in .razor markup. Elements rendered by InputText, InputNumber,
   InputSelect, InputDate and InputTextArea carry NO scope attribute, so a
   page-scoped rule like `.field input[b-x]` never matches them. Combined with
   the appearance:none rule above (which erases the native box), those fields
   render as borderless white strips that look like plain label text.
   This TOP-LEVEL (unscoped) rule restores a visible box for every .field
   control on every page, and is overridden by page-scoped rules where they
   do apply (native inputs in markup).
   ======================================== */
.field input,
.field select,
.field textarea {
  min-height: 2.5rem;
  padding: 0.6rem 0.85rem;
  color: #111827;
  background-color: #FFFFFF;
  border: 2px solid var(--color-gray-400);
  border-radius: var(--input-radius);
  width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* Checkboxes/radios keep their native box — do not stretch or border them. */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  padding: 0;
  border: none;
  accent-color: var(--color-primary-600);
}

:root {
  /* ========================================
     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 (ExamActive Teal - 10 shades) */
  --color-primary-50: #E6F7F4;
  --color-primary-100: #B3E8DE;
  --color-primary-200: #80D9C8;
  --color-primary-300: #4DCAB2;
  --color-primary-400: #3BB89D;
  --color-primary-500: #4A9B8E;
  --color-primary-600: #3D8275;
  --color-primary-700: #2F6A5C;
  --color-primary-800: #225143;
  --color-primary-900: #14382A;

  /* 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: var(--color-teal-500);   /* Teal — brand primary */
  --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);
  --color-bg-primary: var(--color-neutral-50);

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

  /* 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);
}