/* ==========================================================================
   css/variables.css - Design System Variables for OES (Online Examination System)
   Conforms to OES Front-End Specification v2.1 (Section 2, 21, 25)
   ========================================================================== */

:root {
  /* Brand and Theme */
  --brand-primary: #316AFF;
  --tblr-primary: #316AFF;
  --tblr-primary-rgb: 49, 106, 255;
  --brand-dark: #2452D6;
  
  /* Topbar */
  --topbar-bg: #FFFFFF;
  --topbar-text: #082038;
  --topbar-border: #E8E8F0;
  
  /* Sidebar */
  --sidebar-bg: #FFFFFF;
  --sidebar-border: #E8E8F0;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --sidebar-active-bg: #316AFF;
  --sidebar-active-text: #FFFFFF;
  
  /* Page and Cards */
  --page-bg: #F8F8F8;
  --card-bg: #FFFFFF;
  --card-border: #E8E8F0;
  --card-radius: 12px;
  --card-shadow: 0 1px 2px rgba(8, 32, 56, 0.06);
  
  /* Typography & Text Colours (Checked for WCAG AA contrast) */
  --text-primary: #082038;   /* 16.5:1 on white */
  --text-secondary: #3D4F6B; /* High contrast body text */
  --text-muted: #5B6B8A;     /* 5.4:1 on white */
  
  /* Status & Functional Accents */
  --success: #20B078;
  --success-bg: #E6F7EF;
  --danger: #FF401C;
  --danger-bg: #FDE9E5;
  --warning: #FDBB1F;
  --warning-bg: #FDF6DC;
  --info: #02B4FA;
  --info-bg: #EAF7FE;
  --orange: #FF8110;
  --orange-bg: #FFF3E8;
  
  /* Focus Indicator */
  --focus-ring: #316AFF;
  --focus-ring-offset: 2px;
  
  /* KPI Card Background Tints */
  --card-tint-orange: #FDF7F1;
  --card-tint-blue: #F0F9FD;
  --card-tint-warning: #FDF7F1;
  --card-tint-green: #F2F9F6;
  --card-tint-red: #FDF3F1;
  
  /* Exam Palette Colours (Section 2.1 & Section 4) */
  --exam-answered: #20B078;
  --exam-not-answered: #FF401C;
  --exam-not-visited: #E8E8F0;
  --exam-marked: #FDBB1F;
  --exam-text: #082038;
  
  /* Controls and Buttons */
  --btn-radius: 8px;
  --btn-height: 40px;
  --btn-exam-height: 44px;
  --input-radius: 8px;
  --input-height: 40px;
  --input-border: #6B7A96;   /* 3.0:1 on white for form field borders */
  
  /* Layout Dimensions */
  --topbar-height: 64px;
  --footer-padding: 24px;
  --content-max-width: 1280px;
  
  /* Fonts */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Dark Theme (Section 2.1 & 25) */
[data-bs-theme="dark"] {
  --page-bg: #0B1120;
  --card-bg: #111827;
  --card-border: #1F2937;
  --text-primary: #F8F8F8;
  --text-secondary: #94A3B8;
  --text-muted: #6B7A96;
  --topbar-bg: #111827;
  --topbar-text: #F8F8F8;
  --topbar-border: #1F2937;
  --sidebar-bg: #111827;
  --sidebar-border: #1F2937;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --input-border: #475569;
  --exam-not-visited: #1E293B;
  --exam-text: #F8F8F8;
}

/* High Contrast Mode (Section 2.1 & 7.8) */
[data-contrast="high"] {
  --page-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --card-border: #000000;
  --text-primary: #000000;
  --text-secondary: #000000;
  --text-muted: #111111;
  --topbar-bg: #FFFFFF;
  --topbar-text: #000000;
  --topbar-border: #000000;
  --sidebar-bg: #FFFFFF;
  --sidebar-border: #000000;
  --focus-ring: #000000;
  --input-border: #000000;
  --card-shadow: none;
}