/* ============================================
   CSS CUSTOM PROPERTIES — Design System
   Light Blue Neon Theme
   ============================================ */

:root {
  /* ── Colours ── */
  --primary:          #00B4D8;
  --primary-light:    #90E0EF;
  --primary-dark:     #0077B6;
  --primary-rgb:      0, 180, 216;
  --primary-text:     #0284C7; /* WCAG AA on white: contrast ~4.6:1 */

  --bg:               #F8FBFF;
  --bg-alt:           #F0F7FF;
  --surface:          #FFFFFF;
  --surface-2:        #F0F7FF;
  --surface-3:        #E8F4FD;

  --text:             #1A1A2E;
  --text-secondary:   #6B7280;
  --text-muted:       #9CA3AF;
  --text-inverse:     #FFFFFF;

  --success:          #10B981;
  --success-light:    #D1FAE5;
  --success-rgb:      16, 185, 129;

  --error:            #EF4444;
  --error-light:      #FEE2E2;
  --error-rgb:        239, 68, 68;

  --warning:          #F59E0B;
  --warning-light:    #FEF3C7;
  --warning-rgb:      245, 158, 11;

  --info:             #3B82F6;
  --info-light:       #DBEAFE;
  --info-rgb:         59, 130, 246;

  --border:           #E5E7EB;
  --border-strong:    #D1D5DB;

  /* ── Shadows & Glows ── */
  --shadow-sm:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:           0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-md:        0 10px 25px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.05);
  --shadow-lg:        0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);

  --neon-glow:        0 0 14px rgba(var(--primary-rgb),.55), 0 0 40px rgba(var(--primary-rgb),.14);
  --neon-glow-strong: 0 0 20px rgba(var(--primary-rgb),.8), 0 0 55px rgba(var(--primary-rgb),.28), 0 0 100px rgba(var(--primary-rgb),.11);
  --neon-glow-sm:     0 0 8px rgba(var(--primary-rgb),.48);

  --card-shadow:      0 2px 14px rgba(var(--primary-rgb),.11), 0 1px 3px rgba(0,0,0,.06);
  --card-shadow-hover:0 8px 36px rgba(var(--primary-rgb),.28), 0 4px 12px rgba(0,0,0,.08);

  /* ── Border Radius ── */
  --radius-sm:        6px;
  --radius:           12px;
  --radius-md:        16px;
  --radius-lg:        20px;
  --radius-xl:        24px;
  --radius-full:      9999px;

  /* ── Spacing ── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;

  /* ── Typography ── */
  --primary-hue:      194;

  --font-heading:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --text-xs:          0.75rem;    /* 12px */
  --text-sm:          0.875rem;   /* 14px */
  --text-base:        1rem;       /* 16px */
  --text-lg:          1.125rem;   /* 18px */
  --text-xl:          1.25rem;    /* 20px */
  --text-2xl:         1.5rem;     /* 24px */
  --text-3xl:         1.875rem;   /* 30px */
  --text-4xl:         2.25rem;    /* 36px */
  --text-5xl:         3rem;       /* 48px */

  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;

  --font-light:       300;
  --font-normal:      400;
  --font-medium:      500;
  --font-semibold:    600;
  --font-bold:        700;
  --font-extrabold:   800;

  /* ── Transitions ── */
  --transition-fast:  150ms ease;
  --transition:       250ms ease;
  --transition-slow:  400ms ease;
  --transition-bounce:300ms cubic-bezier(.34,1.56,.64,1);

  /* ── Layout ── */
  --sidebar-width:    260px;
  --sidebar-collapsed:72px;
  --header-height:    64px;
  --container-max:    1280px;
  --content-max:      800px;

  /* ── Z-index layers ── */
  --z-below:         -1;
  --z-base:           0;
  --z-raised:         10;
  --z-dropdown:       100;
  --z-sticky:         200;
  /* Mobile top bar + tab bar sit above sticky page elements but below all overlays */
  --z-mobile-chrome: 250;
  --z-overlay:        300;
  --z-modal:          400;
  --z-toast:          500;
  --z-tooltip:        600;
}

/* ════════════════════════════════════════════
   DARK THEME (from Claude Design tokens)
   ════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --bg:               #0A0F1C;
  --bg-alt:           #0D1422;
  --surface:          #131A2B;
  --surface-2:        #1A2236;
  --surface-3:        #232D47;
  --exam-header-bg:   rgba(13,20,34,0.92);

  --text:             #E6EDFA;
  --text-secondary:   #9BA8C4;
  --text-muted:       #6B7896;
  --text-inverse:     #0A0F1C;

  --primary-text:     hsl(194 95% 72%);

  --success-light:    rgba(16,185,129,0.12);
  --error-light:      rgba(239,68,68,0.12);
  --warning-light:    rgba(245,158,11,0.12);
  --info-light:       rgba(59,130,246,0.12);

  --border:           #232D47;
  --border-strong:    #2E3A58;

  --shadow-sm:        0 1px 3px rgba(0,0,0,.45);
  --shadow:           0 4px 10px rgba(0,0,0,.5);
  --shadow-md:        0 10px 25px rgba(0,0,0,.6);
  --shadow-lg:        0 20px 40px rgba(0,0,0,.7);

  --card-shadow:      0 2px 14px rgba(var(--primary-rgb),.16), 0 1px 3px rgba(0,0,0,.3);
  --card-shadow-hover:0 8px 36px rgba(var(--primary-rgb),.35), 0 4px 12px rgba(0,0,0,.4);

  --neon-glow:        0 0 14px rgba(var(--primary-rgb),.68), 0 0 40px rgba(var(--primary-rgb),.2);
  --neon-glow-strong: 0 0 22px rgba(var(--primary-rgb),.85), 0 0 55px rgba(var(--primary-rgb),.35), 0 0 100px rgba(var(--primary-rgb),.14);
  --neon-glow-sm:     0 0 10px rgba(var(--primary-rgb),.6);

  color-scheme: dark;
}

/* ════════════════════════════════════════════
   NEON GLOW OFF — disables all glow effects
   ════════════════════════════════════════════ */
:root[data-neon="0"] {
  --neon-glow:        none;
  --neon-glow-strong: none;
  --neon-glow-sm:     none;
  --card-shadow:      var(--shadow-sm);
  --card-shadow-hover:var(--shadow-md);
}

/* ── Breakpoint helpers via custom props (JS can read these) ── */
@media (max-width: 480px)  { :root { --bp: "xs"; } }
@media (max-width: 768px)  { :root { --bp: "sm"; } }
@media (max-width: 1024px) { :root { --bp: "md"; } }
@media (min-width: 1025px) { :root { --bp: "lg"; } }