/* ============================================
   FONTGENERATOR — Design System Variables
   ============================================ */

:root {
  /* === Brand Colors === */
  --color-primary:        #7C3AED;
  --color-primary-light:  #8B5CF6;
  --color-primary-dark:   #6D28D9;
  --color-secondary:      #3B82F6;
  --color-secondary-dark: #2563EB;

  /* === Gradient === */
  --gradient-brand:    linear-gradient(135deg, #7C3AED 0%, #4F46E5 40%, #3B82F6 100%);
  --gradient-text:     linear-gradient(110deg, #7C3AED 0%, #4F46E5 45%, #3B82F6 100%);
  --gradient-subtle:   linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 100%);
  --gradient-cta:      linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);

  /* === Neutrals === */
  --color-bg:          #FFFFFF;
  --color-bg-alt:      #FAFAFA;
  --color-bg-sidebar:  #F8F7FF;
  --color-surface:     #FFFFFF;
  --color-border:      #E5E7EB;
  --color-border-light:#F3F4F6;

  /* === Text === */
  --color-text-primary:   #111827;
  --color-text-secondary: #4B5563;
  --color-text-muted:     #9CA3AF;
  --color-text-inverse:   #FFFFFF;

  /* === Functional === */
  --color-success:  #10B981;
  --color-warning:  #F59E0B;
  --color-error:    #EF4444;
  --color-info:     #3B82F6;

  /* === Status Dot === */
  --color-online:   #22C55E;

  /* === Typography === */
  --font-ui:        'DM Sans', 'Segoe UI', sans-serif;
  --font-display:   'Sora', 'DM Sans', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

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

  /* === 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;

  /* === Borders === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-primary: 0 4px 14px rgba(124,58,237,0.35);
  --shadow-primary-lg: 0 8px 24px rgba(124,58,237,0.4);

  /* === Layout === */
  --sidebar-left-w:  300px;
  --sidebar-right-w: 240px;
  --navbar-h:        64px;
  --content-max-w:   1400px;

  /* === Transitions === */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-index === */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* === Dark Mode === */
[data-theme="dark"] {
  --color-bg:          #0F0E17;
  --color-bg-alt:      #16151F;
  --color-bg-sidebar:  #13121C;
  --color-surface:     #1C1B28;
  --color-border:      #2D2B3D;
  --color-border-light:#252436;

  --color-text-primary:   #F3F4F6;
  --color-text-secondary: #9CA3AF;
  --color-text-muted:     #6B7280;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.5), 0 8px 10px rgba(0,0,0,0.3);
}