/* ============================================================
   QUIZZING SOCIETY — DESIGN TOKENS
   Brand color palette + Google Sans + Premium Effects
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;600;700;800&family=Product+Sans:wght@400;500;700&display=swap');

:root {
  /* ── Brand Blues (from palette image) ── */
  --brand-bright:   #0E8FE0;
  --brand-deep:     #0047AB;
  --brand-ice:      #D6EAFF;
  --brand-periwinkle:#A3C7F2;
  --brand-sky:      #4CB5F5;
  --brand-cyan:     #00AEEF;

  /* ── Extended Blue Spectrum ── */
  --blue-50:  #EAF4FF;
  --blue-100: #D6EAFF;
  --blue-200: #A3C7F2;
  --blue-300: #7AB3F0;
  --blue-400: #4CB5F5;
  --blue-500: #0E8FE0;
  --blue-600: #0078CC;
  --blue-700: #0060B0;
  --blue-800: #0047AB;
  --blue-900: #003380;
  --blue-950: #001F54;

  /* ── Navy Spectrum (for dark theme) ── */
  --navy-900: #070E1A;
  --navy-800: #0C1628;
  --navy-700: #111E36;
  --navy-600: #182944;
  --navy-500: #203552;

  /* ── Neutrals ── */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ── Status Colors ── */
  --success:    #10B981;
  --success-bg: rgba(16, 185, 129, 0.1);
  --error:      #EF4444;
  --error-bg:   rgba(239, 68, 68, 0.1);
  --warning:    #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --info:       #3B82F6;
  --info-bg:    rgba(59, 130, 246, 0.1);

  /* ── Typography ── */
  --font-heading: 'Google Sans', 'Product Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Google Sans', 'Product Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Google Sans Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;
  --fs-6xl:  3.75rem;
  --fs-7xl:  4.5rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-relaxed:1.8;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;
  --ls-widest:  0.2em;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Borders & Radii ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ── Z-Index Scale ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Layout ── */
  --max-width:     1280px;
  --max-width-sm:  640px;
  --max-width-md:  768px;
  --max-width-lg:  1024px;
  --navbar-height: 64px;

  /* ── Glassmorphism ── */
  --glass-blur: 20px;
  --glass-saturate: 1.8;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-bright) 50%, var(--brand-cyan) 100%);
  --gradient-accent:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-warm:    linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-mesh:    radial-gradient(at 40% 20%, var(--blue-100) 0px, transparent 50%),
                      radial-gradient(at 80% 0%, var(--brand-ice) 0px, transparent 50%),
                      radial-gradient(at 0% 50%, var(--blue-50) 0px, transparent 50%);
}


/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  --primary:          var(--brand-deep);
  --primary-hover:    var(--blue-900);
  --primary-light:    var(--brand-bright);
  --primary-lighter:  var(--brand-sky);
  --primary-surface:  var(--blue-50);
  --primary-border:   var(--blue-200);

  --bg:               #FFFFFF;
  --bg-alt:           var(--slate-50);
  --bg-elevated:      #FFFFFF;

  --surface:          #FFFFFF;
  --surface-hover:    var(--slate-50);
  --surface-border:   transparent;

  --text:             var(--slate-900);
  --text-secondary:   var(--slate-600);
  --text-tertiary:    var(--slate-400);
  --text-on-primary:  #FFFFFF;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl:   0 16px 40px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 24px rgba(14,143,224,0.2);
  --shadow-neon: 0 0 40px rgba(14,143,224,0.3), 0 0 80px rgba(14,143,224,0.1);

  --particle-color:  rgba(0, 71, 171, 0.06);
  --ticker-bg:       var(--brand-deep);
  --ticker-text:     #FFFFFF;

  --hero-gradient:    linear-gradient(180deg, var(--blue-50) 0%, rgba(255,255,255,1) 100%);
  --section-divider:  var(--slate-100);

  /* Glass */
  --glass-bg:      rgba(255, 255, 255, 0.7);
  --glass-border:  rgba(255, 255, 255, 0.5);
  --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.06);

  /* Footer */
  --footer-bg:     var(--slate-800);
  --footer-text:   var(--slate-300);
  --footer-heading: #FFFFFF;
  --footer-link:   var(--slate-400);
  --footer-link-hover: var(--brand-sky);
  --footer-border: rgba(255,255,255,0.08);

  /* Pill Nav tokens */
  --neo-bg:          rgba(255,255,255,0.95);
  --neo-shadow:      0 2px 12px rgba(0,0,0,0.08);
  --neo-shadow-inset:inset 0 1px 3px rgba(0,0,0,0.04);
  --neo-shadow-flat: 0 1px 4px rgba(0,71,171,0.12);
  --border-color:    var(--slate-200);
  --nav-base:        #FFFFFF;
  --nav-pill-bg:     rgba(255,255,255,0.9);
  --nav-pill-text:   var(--slate-700);
  --nav-hover-text:  var(--brand-sky);
  --nav-hover-bg:    rgba(14,143,224,0.08);
}


/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --primary:          var(--brand-sky);
  --primary-hover:    var(--brand-bright);
  --primary-light:    var(--brand-cyan);
  --primary-lighter:  var(--blue-600);
  --primary-surface:  rgba(76,181,245,0.08);
  --primary-border:   rgba(76,181,245,0.2);

  --bg:               #121212;
  --bg-alt:           #1a1a1a;
  --bg-elevated:      #212121;

  --surface:          #212121;
  --surface-hover:    #2a2a2a;
  --surface-border:   rgba(255, 255, 255, 0.1);

  --text:             #ffffff;
  --text-secondary:   #e0e0e0;
  --text-tertiary:    #a0a0a0;
  --text-on-primary:  #121212;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.4);
  --shadow-xl:   0 16px 40px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 30px rgba(76,181,245,0.25);
  --shadow-neon: 0 0 40px rgba(76,181,245,0.35), 0 0 80px rgba(76,181,245,0.15);

  --particle-color:  rgba(76, 181, 245, 0.08);
  --ticker-bg:       var(--navy-800);
  --ticker-text:     var(--blue-200);

  --hero-gradient:    linear-gradient(180deg, rgba(7,14,26,0.8) 0%, var(--navy-900) 100%);
  --section-divider:  var(--navy-600);

  /* Glass */
  --glass-bg:      rgba(17, 30, 54, 0.6);
  --glass-border:  rgba(76, 181, 245, 0.15);
  --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.3);

  /* Footer */
  --footer-bg:     #121212;
  --footer-text:   #a0a0a0;
  --footer-heading: #e8e8e8;
  --footer-link:   #888888;
  --footer-link-hover: var(--brand-sky);
  --footer-border: rgba(255,255,255,0.1);

  /* Pill Nav tokens */
  --neo-bg:          rgba(17,30,54,0.95);
  --neo-shadow:      0 2px 12px rgba(0,0,0,0.3);
  --neo-shadow-inset:inset 0 1px 3px rgba(0,0,0,0.2);
  --neo-shadow-flat: 0 1px 4px rgba(76,181,245,0.15);
  --border-color:    var(--navy-500);
  --nav-base:        var(--navy-700);
  --nav-pill-bg:     rgba(17,30,54,0.9);
  --nav-pill-text:   var(--slate-300);
  --nav-hover-text:  var(--brand-sky);
  --nav-hover-bg:    rgba(76,181,245,0.1);
}