/* ═══════════════════════════════════════════════════
   AiHaber — Design System & CSS Variables
   Pixel-perfect mapping from JSX reference design
   ═══════════════════════════════════════════════════ */

/* ─── LIGHT THEME (default) ──────────────────────── */
:root {
  /* Core surfaces — maps to JSX t.bg / t.bgCard etc */
  --c-bg:          #F8F9FB;
  --c-bg-card:     #FFFFFF;
  --c-bg-card-h:   #F1F3F7;
  --c-bg-elev:     #FFFFFF;
  --c-bg-input:    #F1F3F7;

  /* Borders */
  --c-border:      #E2E5EC;
  --c-border-h:    #C8CDD8;

  /* Text hierarchy */
  --c-tx:          #1A1D26;
  --c-tx-2:        #5C6478;
  --c-tx-3:        #8B93A7;

  /* Brand accent */
  --c-pri:         #5B52E0;
  --c-pri-light:   #6C63FF;
  --c-pri-bg:      rgba(91,82,224,0.06);
  --c-pri-border:  rgba(91,82,224,0.2);
  --c-pri-rgb:     91,82,224;

  /* Semantic */
  --c-ok:          #16A34A;
  --c-warn:        #D97706;
  --c-err:         #DC2626;
  --c-pink:        #EC4899;

  /* Code */
  --c-code-bg:     #F6F8FA;
  --c-code-tx:     #24292F;

  /* Header */
  --c-hdr-bg:      rgba(248,249,251,0.88);

  /* Legacy compat aliases (so old CSS still works) */
  --c-n0:   #FFFFFF;
  --c-n50:  #FAFAF9;
  --c-n100: #F5F5F4;
  --c-n200: #E2E5EC;
  --c-n300: #C8CDD8;
  --c-n500: #8B93A7;
  --c-n600: #5C6478;
  --c-n700: #3D4352;
  --c-n800: #1A1D26;
  --c-n900: #0F1115;
  --c-sec:  #8B5CF6;
  --c-acc:  #EC4899;

  /* Aliases for fixes.css / homepage.css compat */
  --c-bg:    #F8F9FB;
  --c-bgc:   var(--c-bg-card);
  --c-bg2:   var(--c-bg-input);
  --c-brd:   var(--c-border);
  --c-brd2:  var(--c-border);
  --c-tx2:   var(--c-tx-2);
  --c-tx3:   var(--c-tx-3);
  --c-pri-dk:#4F46E5;

  /* Radius aliases */
  --r-s:  var(--r-sm);
  --r-m:  var(--r-md);
  --r-l:  var(--r-lg);
  --r-xl: 12px;

  /* Shadow aliases */
  --sh-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.03);

  /* Transition alias */
  --tr:   0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Category Colors */
  --c-cat-llm:      #7C3AED;
  --c-cat-vision:   #0891B2;
  --c-cat-biz:      #059669;
  --c-cat-research: #C026D3;
  --c-cat-tools:    #EA580C;
  --c-cat-ethics:   #DC2626;
  --c-cat-tutorial: #2563EB;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-lg:   0.9375rem;  /* 15px */
  --text-xl:   1.125rem;   /* 18px */
  --text-2xl:  1.25rem;    /* 20px */
  --text-3xl:  1.5rem;     /* 24px */
  --text-4xl:  1.875rem;   /* 30px */
  --text-5xl:  2.25rem;

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

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 28px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radius — matching JSX values */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-3xl: 16px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs:  0 1px 2px rgba(0,0,0,0.04);
  --sh-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:  0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.03);
  --sh-lg:  0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03);
  --sh-hover: 0 12px 32px rgba(var(--c-pri-rgb),0.08);

  /* Layout */
  --max-w: 1200px;
  --hdr-h: 56px;
  --hdr-h-sm: 48px;
  --sidebar-w: 340px;

  /* Transition */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tr:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-fast: 0.15s ease;
  --tr-slow: 0.4s ease;
}

/* ─── GLOBAL TYPOGRAPHY ──────────────────────────── */
html, body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-tx);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

a { color: inherit; }
code, pre { font-family: var(--font-mono); }

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── DARK THEME ─────────────────────────────────── */
[data-theme="dark"] {
  /* Core surfaces */
  --c-bg:          #0B0E14;
  --c-bg-card:     #141821;
  --c-bg-card-h:   #1A1F2B;
  --c-bg-elev:     #1E2330;
  --c-bg-input:    #0F1218;

  /* Borders */
  --c-border:      #252B3A;
  --c-border-h:    #3B4459;

  /* Text hierarchy */
  --c-tx:          #E4E7EE;
  --c-tx-2:        #8B93A7;
  --c-tx-3:        #5C6478;

  /* Brand accent */
  --c-pri:         #6C63FF;
  --c-pri-light:   #8B84FF;
  --c-pri-bg:      rgba(108,99,255,0.08);
  --c-pri-border:  rgba(108,99,255,0.25);
  --c-pri-rgb:     108,99,255;

  /* Semantic */
  --c-ok:          #22C55E;
  --c-warn:        #F59E0B;
  --c-err:         #EF4444;

  /* Code */
  --c-code-bg:     #0D1117;
  --c-code-tx:     #C9D1D9;

  /* Header */
  --c-hdr-bg:      rgba(11,14,20,0.85);

  /* Legacy compat aliases */
  --c-n0:   #0B0E14;
  --c-n50:  #0F1218;
  --c-n100: #141821;
  --c-n200: #252B3A;
  --c-n300: #3B4459;
  --c-n500: #5C6478;
  --c-n600: #8B93A7;
  --c-n700: #C8CDD8;
  --c-n800: #E4E7EE;
  --c-n900: #F0F2F8;

  --c-sec:  #8B84FF;
  --c-acc:  #EC4899;

  /* Dark mode aliases for fixes.css / homepage.css */
  --c-bgc:   var(--c-bg-card);
  --c-bg2:   var(--c-bg-input);
  --c-brd:   var(--c-border);
  --c-brd2:  var(--c-border);
  --c-tx2:   var(--c-tx-2);
  --c-tx3:   var(--c-tx-3);
  --c-pri-dk:#5B52E0;

  /* Shadows */
  --sh-xs:  0 1px 2px rgba(0,0,0,0.3);
  --sh-sm:  0 0 0 1px rgba(255,255,255,0.05);
  --sh-md:  0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.3);
  --sh-lg:  0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4);
  --sh-hover: 0 0 0 1px var(--c-pri), 0 8px 24px rgba(108,99,255,0.1);
}

/* ─── REDUCED MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── ANIMATIONS ─────────────────────────────────── */
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes ticker-slide {
  0% { transform: translateY(100%); opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  90% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}