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

:root {
  /* ── Colours ── */
  --primary-hue:      194;
  --primary:          #00B4D8;
  --primary-light:    #90E0EF;
  --primary-dark:     #0077B6;
  --primary-rgb:      0, 180, 216;
  --primary-text:     #006D91;
  --on-primary:       #07111F;
  --on-primary-muted: color-mix(in srgb, var(--on-primary) 82%, transparent);
  --accent-subtle:    rgba(var(--primary-rgb), .06);
  --accent-soft:      rgba(var(--primary-rgb), .11);
  --accent-medium:    rgba(var(--primary-rgb), .2);
  --accent-border:    rgba(var(--primary-rgb), .3);

  --bg:               #F7FAFE;
  --bg-alt:           #EFF6FC;
  --surface:          #FFFFFF;
  --surface-2:        #F1F6FB;
  --surface-3:        #E7F1F9;
  --surface-raised:   var(--surface);
  --surface-sunken:   var(--bg-alt);
  --surface-glass:    rgba(247, 250, 254, .88);
  --surface-hover:    color-mix(in srgb, var(--surface) 90%, var(--primary) 10%);
  --surface-selected: color-mix(in srgb, var(--surface) 84%, var(--primary) 16%);
  --scrim:            rgba(15, 23, 42, .5);
  --blueprint-grid:   rgba(var(--primary-rgb), .035);
  --blueprint-major:  rgba(var(--primary-rgb), .055);
  --page-background:
    radial-gradient(circle at 84% -12%, rgba(var(--primary-rgb), .105), transparent 34rem),
    linear-gradient(var(--blueprint-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid) 1px, transparent 1px),
    var(--bg);
  --page-background-size: auto, 32px 32px, 32px 32px, auto;

  --text:             #122033;
  --text-secondary:   #526176;
  --text-muted:       #718096;
  --text-inverse:     #FFFFFF;

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

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

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

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

  --premium:          #7C3AED;
  --premium-text:     #6D28D9;
  --on-premium:       #FFFFFF;
  --premium-light:    rgba(124, 58, 237, .13);
  --premium-rgb:      124, 58, 237;

  --border:           #DCE6F0;
  --border-strong:    #C8D6E5;

  /* ── Shadows & Glows ── */
  --shadow-sm:        0 1px 2px rgba(16, 35, 56, .06), 0 1px 3px rgba(16, 35, 56, .05);
  --shadow:           0 8px 24px rgba(16, 35, 56, .07), 0 2px 6px rgba(16, 35, 56, .04);
  --shadow-md:        0 16px 40px rgba(16, 35, 56, .1), 0 4px 12px rgba(16, 35, 56, .05);
  --shadow-lg:        0 28px 64px rgba(16, 35, 56, .14), 0 10px 24px rgba(16, 35, 56, .07);

  --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 8px 26px rgba(16, 35, 56, .055), 0 1px 2px rgba(16, 35, 56, .04);
  --card-shadow-hover:0 14px 38px rgba(var(--primary-rgb),.16), 0 6px 18px rgba(16, 35, 56, .08);
  --interactive-shadow: 0 5px 18px rgba(var(--primary-rgb), .28);
  --focus-ring:       0 0 0 3px rgba(var(--primary-rgb), .24);
  --focus-ring-error: 0 0 0 3px rgba(var(--error-rgb), .18);

  /* ── Border Radius ── */
  --radius-sm:        8px;
  --radius:           12px;
  --radius-md:        16px;
  --radius-lg:        22px;
  --radius-xl:        28px;
  --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 ── */
  --font-heading:     'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:        'Inter', -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 cubic-bezier(.2,.8,.2,1);
  --transition:       240ms cubic-bezier(.2,.8,.2,1);
  --transition-slow:  360ms cubic-bezier(.2,.8,.2,1);
  --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;
  --content-wide:     1120px;
  --content-narrow:   680px;
  --control-height:   44px;
  --control-height-sm:36px;
  --page-gutter:      clamp(16px, 2.2vw, 32px);
  --section-gap:      clamp(28px, 4vw, 56px);

  /* ── 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;
  --surface-glass:    rgba(10,15,28,.9);
  --surface-hover:    color-mix(in srgb, var(--surface) 88%, var(--primary) 12%);
  --surface-selected: color-mix(in srgb, var(--surface) 80%, var(--primary) 20%);
  --scrim:            rgba(0, 0, 0, .68);
  --blueprint-grid:   rgba(var(--primary-rgb), .025);
  --blueprint-major:  rgba(var(--primary-rgb), .05);
  --page-background:
    radial-gradient(circle at 82% -10%, rgba(var(--primary-rgb), .13), transparent 36rem),
    linear-gradient(var(--blueprint-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid) 1px, transparent 1px),
    var(--bg);
  --exam-header-bg:   rgba(13,20,34,0.92);

  --text:             #E6EDFA;
  --text-secondary:   #AAB6CD;
  --text-muted:       #8290AC;
  --text-inverse:     #0A0F1C;

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

  --success-light:    rgba(16,185,129,0.12);
  --success-text:     #6EE7B7;
  --error-light:      rgba(239,68,68,0.12);
  --error-text:       #FCA5A5;
  --warning-light:    rgba(245,158,11,0.12);
  --warning-text:     #FCD34D;
  --info-light:       rgba(59,130,246,0.12);
  --info-text:        #93C5FD;
  --premium-text:     #C4B5FD;

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

  --interactive-shadow: 0 5px 20px rgba(var(--primary-rgb), .25);
  --focus-ring:       0 0 0 3px rgba(var(--primary-rgb), .34);

  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);
  --interactive-shadow: var(--shadow-sm);
}

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