/* =====================================================
   DESIGN TOKENS — Bahadır Özdemir Portfolio
   ===================================================== */

@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&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Dark Theme (Default) ── */
:root {
  /* Backgrounds */
  --bg-primary:    #070b14;
  --bg-secondary:  #0d1221;
  --bg-tertiary:   #131929;
  --bg-glass:      rgba(13, 18, 33, 0.72);
  --bg-glass-light: rgba(255,255,255,0.04);

  /* Accent palette */
  --accent-primary:   #6366f1;   /* Electric indigo */
  --accent-secondary: #06b6d4;   /* Neon cyan */
  --accent-green:     #10b981;   /* Emerald */
  --accent-amber:     #f59e0b;   /* Warm amber */
  --accent-rose:      #f43f5e;   /* Signal red */

  /* Gradient shortcuts */
  --grad-main:   linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  --grad-warm:   linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --grad-green:  linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --grad-hero:   radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.25) 0%, transparent 60%);

  /* Text */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --text-accent:    #6366f1;

  /* Borders */
  --border-subtle:  rgba(99,102,241,0.12);
  --border-medium:  rgba(99,102,241,0.28);
  --border-bright:  rgba(99,102,241,0.55);

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 30px rgba(99,102,241,0.30), 0 0 60px rgba(6,182,212,0.10);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,102,241,0.10);

  /* Glass blur */
  --blur-glass:  saturate(180%) blur(16px);
  --blur-modal:  saturate(150%) blur(24px);

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-sans:  'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:  'Space Mono', 'Courier New', monospace;

  /* Sizing */
  --container:  1200px;
  --navbar-h:   72px;

  /* Status colors */
  --color-available: #10b981;
  --color-warning:   #f59e0b;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg-primary:    #f8faff;
  --bg-secondary:  #eef2fb;
  --bg-tertiary:   #e4eaf7;
  --bg-glass:      rgba(248, 250, 255, 0.82);
  --bg-glass-light: rgba(0,0,0,0.03);

  --grad-hero:   radial-gradient(ellipse 80% 50% at 50% -5%, rgba(99,102,241,0.15) 0%, transparent 60%);

  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #64748b;

  --border-subtle:  rgba(99,102,241,0.10);
  --border-medium:  rgba(99,102,241,0.22);
  --border-bright:  rgba(99,102,241,0.45);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:   0 10px 40px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 30px rgba(99,102,241,0.18), 0 0 60px rgba(6,182,212,0.06);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(99,102,241,0.10);
}