/* ============================================================
   CitationGuard AI — CSS Design Tokens (variables.css)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand Colors - Indigo & Violet Theme */
  --primary-50:  #EEF2FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-300: #A5B4FC;
  --primary-400: #818CF8;
  --primary-500: #6366F1;
  --primary-600: #4F46E5;
  --primary-700: #4338CA;
  --primary-800: #3730A3;
  --primary-900: #312E81;

  --purple-400:  #C084FC;
  --purple-500:  #A855F7;
  --purple-600:  #9333EA;
  --purple-700:  #7E22CE;

  /* Brand Colors - Emerald Theme (CTA / Success) */
  --success-50:  #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-300: #6EE7B7;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50:  #FFFBEB;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;

  --danger-50:   #FEF2F2;
  --danger-400:  #F87171;
  --danger-500:  #EF4444;
  --danger-600:  #DC2626;
  --danger-700:  #B91C1C;

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

  /* Semantic */
  --color-bg:           #FFFFFF;
  --color-bg-secondary: var(--gray-50);
  --color-bg-tertiary:  var(--gray-100);
  --color-surface:      #FFFFFF;
  --color-border:       var(--gray-200);
  --color-border-subtle:var(--gray-100);
  --color-text:         var(--gray-900);
  --color-text-muted:   var(--gray-500);
  --color-text-subtle:  var(--gray-400);

  /* Sidebar */
  --sidebar-bg:         var(--gray-900);
  --sidebar-text:       var(--gray-300);
  --sidebar-active-bg:  rgba(99,102,241,0.15);
  --sidebar-active-text:var(--primary-400);

  /* Enterprise Typography System */
  --font-sans:    'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 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 */
  --text-6xl:  3.75rem;   /* 60px */

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

  --lh-tight:  1.25;
  --lh-snug:   1.375;
  --lh-normal: 1.5;
  --lh-relaxed:1.625;
  --lh-loose:  2;

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

  /* Borders */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-3xl:  1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:   0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-2xl:  0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-glow-blue:   0 0 0 3px rgba(37,99,235,0.15), 0 4px 16px rgba(37,99,235,0.2);
  --shadow-glow-purple: 0 0 0 3px rgba(124,58,237,0.15), 0 4px 16px rgba(124,58,237,0.2);
  --shadow-glow-green:  0 0 0 3px rgba(5,150,105,0.15), 0 4px 16px rgba(5,150,105,0.2);

  /* Layout */
  --sidebar-width:        240px;
  --sidebar-collapsed:    64px;
  --header-height:        60px;
  --content-max:          1200px;
  --panel-width:          340px;

  /* Transitions */
  --transition-fast:    150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:    200ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:    300ms cubic-bezier(0.4,0,0.2,1);
  --transition-bounce:  400ms cubic-bezier(0.34,1.56,0.64,1);

  /* Glass */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.4);
  --glass-blur:   blur(16px);

  /* Risk Colors */
  --risk-low:      var(--success-600);
  --risk-low-bg:   var(--success-50);
  --risk-moderate: var(--warning-600);
  --risk-moderate-bg: var(--warning-50);
  --risk-high:     var(--danger-600);
  --risk-high-bg:  var(--danger-50);
  --risk-critical: #7C2D12;
  --risk-critical-bg: #FFF7ED;
}