/* ============================================
   PIXEL PRODUCTION — Premium Design Tokens
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── DARK THEME (Linear / Vercel style) ─── */
  --bg-deepest:    #000000;
  --bg-page:       rgba(10, 10, 10, 0.4);
  --bg-surface:    #111111;
  --bg-card:       #171717;
  --bg-card-hover: #1F1F1F;
  --bg-elevated:   #262626;
  --bg-input:      #111111;

  /* ─── Premium Indigo Accent ─── */
  --primary:       #6366F1;
  --primary-light: #818CF8;
  --primary-dark:  #4F46E5;
  --primary-glow:  rgba(99, 102, 241, 0.2);
  --primary-subtle:rgba(99, 102, 241, 0.08);
  --primary-border:rgba(99, 102, 241, 0.2);
  --primary-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  --primary-gradient-vivid: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);

  /* ─── Status Colors (Softer, modern tones) ─── */
  --success:       #34D399;
  --success-bg:    rgba(16, 185, 129, 0.1);
  --success-border:rgba(16, 185, 129, 0.2);
  
  --warning:       #FBBF24;
  --warning-bg:    rgba(245, 158, 11, 0.1);
  --warning-border:rgba(245, 158, 11, 0.2);
  
  --error:         #F87171;
  --error-bg:      rgba(239, 68, 68, 0.1);
  --error-border:  rgba(239, 68, 68, 0.2);
  
  --info:          #60A5FA;
  --info-bg:       rgba(59, 130, 246, 0.1);
  --info-border:   rgba(59, 130, 246, 0.2);

  --pending:       #FB923C;
  --pending-bg:    rgba(249, 115, 22, 0.1);

  /* ─── Text ─── */
  --text-primary:  #EDEDED;
  --text-secondary:#A1A1AA;
  --text-muted:    #71717A;
  --text-accent:   #818CF8;
  --text-inverse:  #000000;

  /* ─── Borders (Very subtle) ─── */
  --border:        rgba(255, 255, 255, 0.08);
  --border-hover:  rgba(255, 255, 255, 0.15);
  --border-active: rgba(255, 255, 255, 0.25);
  --border-subtle: rgba(255, 255, 255, 0.04);

  /* ─── Shadows (Deep & Soft) ─── */
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl:     0 16px 40px rgba(0, 0, 0, 0.8);
  --shadow-glow:   0 0 20px rgba(99, 102, 241, 0.1);
  --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.05);

  /* ─── Glassmorphism ─── */
  --glass-bg:      rgba(10, 10, 10, 0.65);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --glass-blur:    16px;

  /* ─── Spacing (8px grid) ─── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ─── Radius (Softer, modern corners) ─── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full:9999px;

  /* ─── Typography ─── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 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 */

  /* ─── Transitions ─── */
  --transition-fast:   100ms 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-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-Index ─── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ─── Layout Dimensions ─── */
  --sidebar-width:     240px;
  --sidebar-collapsed:  64px;
  --topbar-height:      60px;

  /* ─── Avatar Gradients (Sophisticated tones) ─── */
  --avatar-1: linear-gradient(135deg, #3B82F6, #2563EB);
  --avatar-2: linear-gradient(135deg, #10B981, #059669);
  --avatar-3: linear-gradient(135deg, #F59E0B, #D97706);
  --avatar-4: linear-gradient(135deg, #EC4899, #DB2777);
  --avatar-5: linear-gradient(135deg, #8B5CF6, #7C3AED);
  --avatar-6: linear-gradient(135deg, #14B8A6, #0D9488);
  --avatar-7: linear-gradient(135deg, #F43F5E, #E11D48);
  --avatar-8: linear-gradient(135deg, #6366F1, #4F46E5);
}

/* ─── LIGHT THEME (HubSpot / Stripe / Modern SaaS) ─── */
html[data-theme="light"] {
  --bg-deepest:    #F8FAFC; /* Very light cool gray */
  --bg-page:       rgba(241, 245, 249, 0.4); /* Translucent off-white for page */
  --bg-surface:    rgba(255, 255, 255, 0.7); /* Translucent for glass */
  --bg-card:       rgba(255, 255, 255, 0.6);
  --bg-card-hover: rgba(255, 255, 255, 0.9);
  --bg-elevated:   rgba(255, 255, 255, 0.85);
  --bg-input:      #FFFFFF;

  --primary:       #4F46E5;
  --primary-light: #6366F1;
  --primary-dark:  #4338CA;
  --primary-glow:  rgba(79, 70, 229, 0.15);
  --primary-subtle:rgba(79, 70, 229, 0.06);
  --primary-border:rgba(79, 70, 229, 0.2);
  --primary-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  --primary-gradient-vivid: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);

  /* Light Theme Status Colors */
  --success:       #059669;
  --success-bg:    #ECFDF5;
  --success-border:#A7F3D0;
  
  --warning:       #D97706;
  --warning-bg:    #FFFBEB;
  --warning-border:#FDE68A;
  
  --error:         #DC2626;
  --error-bg:      #FEF2F2;
  --error-border:  #FECACA;
  
  --info:          #2563EB;
  --info-bg:       #EFF6FF;
  --info-border:   #BFDBFE;

  --pending:       #EA580C;
  --pending-bg:    #FFF7ED;

  /* Text Colors */
  --text-primary:  #0F172A; /* Slate 900 */
  --text-secondary:#475569; /* Slate 600 */
  --text-muted:    #94A3B8; /* Slate 400 */
  --text-accent:   #4F46E5;
  --text-inverse:  #FFFFFF;

  /* Borders */
  --border:        rgba(15, 23, 42, 0.1);
  --border-hover:  rgba(15, 23, 42, 0.15);
  --border-active: rgba(15, 23, 42, 0.25);
  --border-subtle: rgba(15, 23, 42, 0.05);

  /* Shadows (Crisp & Clean) */
  --shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md:     0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg:     0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl:     0 20px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  --shadow-glow:   0 0 20px rgba(79, 70, 229, 0.1);
  --shadow-card:   0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6);

  /* Glassmorphism */
  --glass-bg:      rgba(255, 255, 255, 0.7);
  --glass-border:  rgba(255, 255, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════
   LIQUID GLASS — buzlu cam tasarım dili (yalnızca stil)
   Yüzeyler yarı saydam + backdrop blur; arkada renkli
   ambians zemin refraksiyonu besler. İki tema için.
   ═══════════════════════════════════════════════════════ */
:root {
  --glass-blur: 24px;
  --glass-bg:        rgba(22, 23, 32, 0.55);
  --glass-bg-strong: rgba(24, 25, 35, 0.72);
  --glass-border:    rgba(255, 255, 255, 0.10);
  --glass-hi:        rgba(255, 255, 255, 0.16);   /* üst speküler ışık */
  --glass-shadow:    0 10px 34px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.24);
  --glass-inset:     inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,0.03);
  --ambient:
    radial-gradient(58% 52% at 14% 10%,  rgba(99,102,241,0.26), transparent 60%),
    radial-gradient(54% 50% at 88% 16%,  rgba(139,92,246,0.20), transparent 62%),
    radial-gradient(60% 60% at 78% 92%,  rgba(56,189,248,0.16), transparent 60%),
    radial-gradient(50% 50% at 30% 96%,  rgba(236,72,153,0.10), transparent 62%),
    var(--bg-page);
}
[data-theme="light"] {
  --glass-bg:        rgba(255, 255, 255, 0.60);
  --glass-bg-strong: rgba(255, 255, 255, 0.80);
  --glass-border:    rgba(255, 255, 255, 0.75);
  --glass-hi:        rgba(255, 255, 255, 0.95);
  --glass-shadow:    0 10px 30px rgba(16,24,40,0.10), 0 2px 8px rgba(16,24,40,0.06);
  --glass-inset:     inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,0.35);
  --ambient:
    radial-gradient(58% 52% at 12% 8%,   rgba(99,102,241,0.16), transparent 60%),
    radial-gradient(54% 50% at 90% 14%,  rgba(139,92,246,0.12), transparent 62%),
    radial-gradient(60% 60% at 80% 94%,  rgba(56,189,248,0.12), transparent 60%),
    radial-gradient(50% 50% at 28% 98%,  rgba(236,72,153,0.07), transparent 62%),
    var(--bg-page);
}