/* ============================================================
   DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Portfolio | AI Engineer & Full Stack Developer
   ============================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --color-primary:        #2563EB;
  --color-primary-light:  #3B82F6;
  --color-primary-dark:   #1D4ED8;

  --color-secondary:      #7C3AED;
  --color-secondary-light:#8B5CF6;
  --color-secondary-dark: #6D28D9;

  --color-accent:         #06B6D4;
  --color-accent-light:   #22D3EE;
  --color-accent-dark:    #0891B2;

  --color-success:        #10B981;
  --color-warning:        #F59E0B;
  --color-danger:         #EF4444;

  /* ── Background ─────────────────────────────────────────── */
  --bg-base:              #050816;
  --bg-surface:           #0A0F2E;
  --bg-elevated:          #0D1433;
  --bg-card:              rgba(255, 255, 255, 0.05);
  --bg-card-hover:        rgba(255, 255, 255, 0.08);
  --bg-glass:             rgba(255, 255, 255, 0.04);
  --bg-glass-strong:      rgba(255, 255, 255, 0.10);
  --bg-overlay:           rgba(5, 8, 22, 0.85);

  /* ── Borders ─────────────────────────────────────────────── */
  --border-subtle:        rgba(255, 255, 255, 0.06);
  --border-default:       rgba(255, 255, 255, 0.12);
  --border-strong:        rgba(255, 255, 255, 0.20);
  --border-primary:       rgba(37, 99, 235, 0.40);
  --border-accent:        rgba(6, 182, 212, 0.40);
  --border-radius-xs:     6px;
  --border-radius-sm:     10px;
  --border-radius-md:     16px;
  --border-radius-lg:     24px;
  --border-radius-xl:     32px;
  --border-radius-2xl:    48px;
  --border-radius-full:   9999px;

  /* ── Typography ─────────────────────────────────────────── */
  --font-heading:        'Space Grotesk', sans-serif;
  --font-body:           'Inter', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', monospace;

  --text-primary:        #FFFFFF;
  --text-secondary:      #D1D5DB;
  --text-muted:          #A1A1AA;
  --text-faint:          #6B7280;
  --text-accent:         #06B6D4;
  --text-gradient-from:  #FFFFFF;
  --text-gradient-to:    #A1A1AA;

  /* Font Sizes — fluid scale */
  --fs-2xs:  clamp(0.625rem, 0.5vw + 0.5rem, 0.75rem);
  --fs-xs:   clamp(0.75rem,  0.6vw + 0.6rem, 0.875rem);
  --fs-sm:   clamp(0.875rem, 0.7vw + 0.7rem, 1rem);
  --fs-base: clamp(1rem,     0.9vw + 0.8rem, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1vw   + 0.9rem, 1.25rem);
  --fs-xl:   clamp(1.25rem,  1.2vw + 1rem,   1.5rem);
  --fs-2xl:  clamp(1.5rem,   1.8vw + 1rem,   2rem);
  --fs-3xl:  clamp(2rem,     3vw   + 1rem,   3rem);
  --fs-4xl:  clamp(2.5rem,   4vw   + 1rem,   4rem);
  --fs-5xl:  clamp(3rem,     5vw   + 1rem,   5.5rem);
  --fs-6xl:  clamp(3.5rem,   6vw   + 1rem,   7rem);

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  /* Line Heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;
  --lh-loose:   2.0;

  /* Letter Spacing */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;
  --ls-widest:   0.2em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.6);
  --shadow-xl:  0 24px 80px rgba(0,0,0,0.7);
  --shadow-2xl: 0 40px 120px rgba(0,0,0,0.8);

  --shadow-primary: 0 8px 32px rgba(37, 99, 235, 0.35);
  --shadow-secondary: 0 8px 32px rgba(124, 58, 237, 0.35);
  --shadow-accent: 0 8px 32px rgba(6, 182, 212, 0.35);
  --shadow-glow-primary: 0 0 60px rgba(37, 99, 235, 0.25);
  --shadow-glow-secondary: 0 0 60px rgba(124, 58, 237, 0.25);
  --shadow-glow-accent: 0 0 60px rgba(6, 182, 212, 0.25);

  /* ── Gradients ───────────────────────────────────────────── */
  --gradient-primary:   linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-accent:    linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  --gradient-warm:      linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --gradient-full:      linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));
  --gradient-radial:    radial-gradient(ellipse at center, rgba(37,99,235,0.15), transparent 70%);
  --gradient-hero:      radial-gradient(ellipse at 30% 50%, rgba(37,99,235,0.2) 0%, transparent 60%),
                        radial-gradient(ellipse at 70% 20%, rgba(124,58,237,0.15) 0%, transparent 60%),
                        radial-gradient(ellipse at 50% 80%, rgba(6,182,212,0.1) 0%, transparent 60%);
  --gradient-card:      linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  --gradient-border:    linear-gradient(135deg, rgba(37,99,235,0.5), rgba(124,58,237,0.5), rgba(6,182,212,0.5));
  --gradient-text:      linear-gradient(135deg, #FFFFFF 0%, #A1A1AA 100%);
  --gradient-text-vivid:linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light), var(--color-accent-light));

  /* ── Glassmorphism ───────────────────────────────────────── */
  --glass-bg:           rgba(255, 255, 255, 0.05);
  --glass-bg-strong:    rgba(255, 255, 255, 0.10);
  --glass-border:       rgba(255, 255, 255, 0.12);
  --glass-blur:         blur(20px);
  --glass-blur-light:   blur(10px);
  --glass-blur-strong:  blur(40px);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-xs:   480px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-max:  1600px;

  --navbar-height:  72px;
  --section-py:     clamp(60px, 8vw, 120px);

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

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:    cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-slower:600ms;
  --duration-page:  800ms;

  --transition-base:     all var(--duration-base) var(--ease-in-out);
  --transition-fast:     all var(--duration-fast) var(--ease-out);
  --transition-slow:     all var(--duration-slow) var(--ease-in-out);
  --transition-spring:   all var(--duration-slow) var(--ease-spring);
  --transition-color:    color var(--duration-base) var(--ease-in-out),
                         background-color var(--duration-base) var(--ease-in-out),
                         border-color var(--duration-base) var(--ease-in-out);

  /* ── Blur / Backdrop Filters ─────────────────────────────── */
  --blur-sm:   blur(4px);
  --blur-md:   blur(12px);
  --blur-lg:   blur(24px);
  --blur-xl:   blur(48px);

  /* ── Scrollbar ───────────────────────────────────────────── */
  --scrollbar-track:  var(--bg-base);
  --scrollbar-thumb:  rgba(37, 99, 235, 0.4);
  --scrollbar-hover:  rgba(37, 99, 235, 0.7);
}

/* ── Light Theme Override ─────────────────────────────────── */
[data-theme="light"] {
  --bg-base:            #F8FAFF;
  --bg-surface:         #EEF2FF;
  --bg-elevated:        #E0E7FF;
  --bg-card:            rgba(255, 255, 255, 0.70);
  --bg-card-hover:      rgba(255, 255, 255, 0.90);
  --bg-glass:           rgba(255, 255, 255, 0.60);
  --bg-glass-strong:    rgba(255, 255, 255, 0.85);
  --bg-overlay:         rgba(248, 250, 255, 0.90);

  --border-subtle:      rgba(0, 0, 0, 0.06);
  --border-default:     rgba(0, 0, 0, 0.12);
  --border-strong:      rgba(0, 0, 0, 0.20);

  --text-primary:       #0F0F23;
  --text-secondary:     #1F2937;
  --text-muted:         #4B5563;
  --text-faint:         #6B7280;

  --glass-bg:           rgba(255, 255, 255, 0.60);
  --glass-bg-strong:    rgba(255, 255, 255, 0.85);
  --glass-border:       rgba(0, 0, 0, 0.10);

  --shadow-xs:   0 1px 3px rgba(0,0,0,0.10);
  --shadow-sm:   0 4px 12px rgba(0,0,0,0.12);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.14);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.16);
  --shadow-xl:   0 24px 80px rgba(0,0,0,0.18);

  --gradient-hero: radial-gradient(ellipse at 30% 50%, rgba(37,99,235,0.12) 0%, transparent 60%),
                   radial-gradient(ellipse at 70% 20%, rgba(124,58,237,0.10) 0%, transparent 60%);
  --gradient-text: linear-gradient(135deg, #0F0F23 0%, #374151 100%);

  --scrollbar-track:  var(--bg-base);
  --scrollbar-thumb:  rgba(37, 99, 235, 0.3);
}