/* ===================================================================
   CSS VARIABLES — PromithicAI v1.1
   Design tokens for both dark (default) and light themes
   =================================================================== */

:root {
  /* ── Backgrounds ── */
  --bg-primary:       #0a0e1a;
  --bg-secondary:     #111827;
  --bg-tertiary:      #0d1520;
  --bg-card:          #1a2235;
  --bg-card-hover:    #1e2a42;
  --bg-input:         #0f1829;
  --bg-sidebar:       #0d1520;
  --bg-nav:           rgba(10, 14, 26, 0.92);
  --bg-overlay:       rgba(0, 0, 0, 0.6);
  --bg-code:          #0d1117;

  /* ── Accent Colors ── */
  --accent-cyan:      #00d4ff;
  --accent-cyan-dim:  #00a8cc;
  --accent-violet:    #7c3aed;
  --accent-violet-dim:#5b21b6;
  --accent-green:     #10b981;
  --accent-orange:    #f59e0b;
  --accent-red:       #ef4444;
  --accent-yellow:    #fbbf24;

  /* ── Glow / Alpha Colors ── */
  --glow-cyan:        rgba(0, 212, 255, 0.18);
  --glow-violet:      rgba(124, 58, 237, 0.18);
  --glow-green:       rgba(16, 185, 129, 0.18);
  --glow-orange:      rgba(245, 158, 11, 0.18);
  --glow-red:         rgba(239, 68, 68, 0.18);

  /* ── Text ── */
  --text-primary:     #f0f4ff;
  --text-secondary:   #8b9ab4;
  --text-muted:       #4a5568;
  --text-code:        #00d4ff;
  --text-inverse:     #0a0e1a;

  /* ── Borders ── */
  --border:           #1e2d45;
  --border-hover:     #2a3f5f;
  --border-focus:     rgba(0, 212, 255, 0.5);
  --border-glow:      rgba(0, 212, 255, 0.35);

  /* ── Shadows ── */
  --shadow-xs:        0 1px 4px rgba(0,0,0,0.3);
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg:        0 8px 40px rgba(0,0,0,0.55);
  --shadow-xl:        0 16px 64px rgba(0,0,0,0.6);
  --shadow-glow-cyan: 0 0 24px rgba(0, 212, 255, 0.25), 0 0 48px rgba(0, 212, 255, 0.1);
  --shadow-glow-violet:0 0 24px rgba(124, 58, 237, 0.25), 0 0 48px rgba(124, 58, 237, 0.1);

  /* ── Gradients ── */
  --gradient-accent:  linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  --gradient-accent-r:linear-gradient(135deg, #7c3aed 0%, #00d4ff 100%);
  --gradient-btn:     linear-gradient(135deg, #00c4ee 0%, #6d28d9 100%);
  --gradient-btn-hover:linear-gradient(135deg, #00b0d4 0%, #5b21b6 100%);
  --gradient-card:    linear-gradient(145deg, #1a2235 0%, #1c2640 100%);
  --gradient-hero:    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(0,212,255,0.06) 0%, transparent 70%),
                      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(124,58,237,0.07) 0%, transparent 70%),
                      radial-gradient(ellipse 40% 40% at 60% 80%, rgba(16,185,129,0.04) 0%, transparent 60%);
  --gradient-sidebar: linear-gradient(180deg, #0d1520 0%, #0a0e1a 100%);
  --gradient-text:    linear-gradient(135deg, #00d4ff, #7c3aed);

  /* ── Border Radii ── */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  9999px;

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

  /* ── Typography ── */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Font Sizes ── */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.1875rem;  /* 19px */
  --text-2xl:  1.4375rem;  /* 23px */
  --text-3xl:  1.8125rem;  /* 29px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* ── Line Heights ── */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* ── Z-Indices ── */
  --z-below:    -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      1000;
  --z-modal:    2000;
  --z-toast:    3000;
  --z-tooltip:  4000;

  /* ── Layout ── */
  --nav-height:     64px;
  --sidebar-width:  260px;
  --sidebar-collapsed: 0px;
  --panel-width:    320px;
  --max-content:    1280px;
  --max-prose:      720px;
}

/* ── Light Mode Overrides ── */
[data-theme="light"] {
  --bg-primary:       #f4f7ff;
  --bg-secondary:     #ffffff;
  --bg-tertiary:      #edf0fc;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f0f4ff;
  --bg-input:         #ffffff;
  --bg-sidebar:       #f4f7ff;
  --bg-nav:           rgba(244, 247, 255, 0.92);
  --bg-overlay:       rgba(0, 0, 0, 0.4);
  --bg-code:          #f8f9fc;

  --accent-cyan:      #0077e6;
  --accent-cyan-dim:  #005bb3;
  --accent-violet:    #6d28d9;
  --accent-violet-dim:#4c1d95;
  --accent-green:     #059669;
  --glow-cyan:        rgba(0, 119, 230, 0.1);
  --glow-violet:      rgba(109, 40, 217, 0.1);
  --glow-green:       rgba(5, 150, 105, 0.1);

  --text-primary:     #0a0e1a;
  --text-secondary:   #4a5568;
  --text-muted:       #9ca3af;
  --text-code:        #0066cc;

  --border:           #d1d9ee;
  --border-hover:     #a0b3d0;
  --border-focus:     rgba(0, 119, 230, 0.5);
  --border-glow:      rgba(0, 119, 230, 0.3);

  --shadow-xs:        0 1px 4px rgba(0,0,0,0.05);
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:        0 8px 40px rgba(0,0,0,0.1);
  --shadow-xl:        0 16px 64px rgba(0,0,0,0.12);
  --shadow-glow-cyan: 0 0 24px rgba(0, 119, 230, 0.15);
  --shadow-glow-violet:0 0 24px rgba(109, 40, 217, 0.15);

  --gradient-card:    linear-gradient(145deg, #ffffff 0%, #f4f7ff 100%);
  --gradient-hero:    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(0,119,230,0.05) 0%, transparent 70%),
                      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(109,40,217,0.05) 0%, transparent 70%);
  --gradient-sidebar: linear-gradient(180deg, #f4f7ff 0%, #edf0fc 100%);
}