/* ==========================================================================
   Alperen AI — Design Tokens
   CSS Custom Properties: renkler, tipografi, spacing, geçişler.
   ========================================================================== */

:root {
	/* ── Renk Paleti (Koyu Tema — Varsayılan) ─────────────────────── */
	--color-bg-primary:       #030014;
	--color-bg-secondary:     #09051A;
	--color-bg-tertiary:      #110B2E;
	--color-surface:          rgba(255, 255, 255, 0.03);
	--color-surface-hover:    rgba(255, 255, 255, 0.06);
	--color-border:           rgba(255, 255, 255, 0.08);
	--color-border-hover:     rgba(255, 255, 255, 0.15);

	/* Vurgu Renkleri */
	--color-accent-purple:       #7C3AED;
	--color-accent-purple-hover: #6D28D9;
	--color-accent-purple-glow:  rgba(124, 58, 237, 0.3);
	--color-accent-cyan:         #22D3EE;
	--color-accent-cyan-hover:   #06B6D4;
	--color-accent-cyan-glow:    rgba(34, 211, 238, 0.3);
	--color-accent-green:        #34D399;

	/* Metin Renkleri */
	--color-text-primary:   #F8FAFC;
	--color-text-secondary: #94A3B8;
	--color-text-tertiary:  #64748B;

	/* Gradient'ler */
	--gradient-accent:      linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-cyan));
	--gradient-accent-hover: linear-gradient(135deg, var(--color-accent-purple-hover), var(--color-accent-cyan-hover));
	--gradient-text:        linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-cyan));
	--gradient-glow:        radial-gradient(ellipse at 50% 50%, var(--color-accent-purple-glow) 0%, transparent 70%);

	/* ── Tipografi ─────────────────────────────────────────────────── */
	--font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	--font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	--font-mono:    'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;

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

	/* Hero — clamp ile responsive */
	--text-hero-name:  clamp(2.5rem, 5vw + 1rem, 6rem);
	--text-hero-title: clamp(1.25rem, 2vw + 0.5rem, 2rem);

	/* Ağırlıklar */
	--font-normal:    400;
	--font-medium:    500;
	--font-semibold:  600;
	--font-bold:      700;
	--font-extrabold: 800;

	/* Satır Yükseklikleri */
	--leading-tight:   1.1;
	--leading-snug:    1.3;
	--leading-normal:  1.5;
	--leading-relaxed: 1.75;

	/* ── Boşluklar ─────────────────────────────────────────────────── */
	--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;
	--space-20: 5rem;
	--space-24: 6rem;

	/* ── Yerleşim ──────────────────────────────────────────────────── */
	--container-max:    80rem;
	--container-px:     var(--space-4);
	--header-height:    4rem;
	--header-height-lg: 5rem;

	/* ── Köşe Yuvarlaklığı ─────────────────────────────────────────── */
	--radius-sm:   0.375rem;
	--radius-md:   0.5rem;
	--radius-lg:   0.75rem;
	--radius-xl:   1rem;
	--radius-2xl:  1.5rem;
	--radius-full: 9999px;

	/* ── Geçişler ──────────────────────────────────────────────────── */
	--duration-fast:   150ms;
	--duration-normal: 300ms;
	--duration-slow:   500ms;
	--ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

	/* ── Gölgeler ──────────────────────────────────────────────────── */
	--shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.3);
	--shadow-md:          0 4px 14px rgba(0, 0, 0, 0.4);
	--shadow-lg:          0 10px 40px rgba(0, 0, 0, 0.5);
	--shadow-glow-purple: 0 0 20px var(--color-accent-purple-glow);
	--shadow-glow-cyan:   0 0 20px var(--color-accent-cyan-glow);

	/* ── Z-Index Skalası ───────────────────────────────────────────── */
	--z-base:        1;
	--z-overlay:     80;
	--z-mobile-menu: 90;
	--z-header:      100;
	--z-skip-link:   200;
}

/* ── Açık Tema ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
	--color-bg-primary:       #F8FAFC;
	--color-bg-secondary:     #EEF2FF;
	--color-bg-tertiary:      #E0E7FF;
	--color-surface:          rgba(0, 0, 0, 0.03);
	--color-surface-hover:    rgba(0, 0, 0, 0.06);
	--color-border:           rgba(0, 0, 0, 0.1);
	--color-border-hover:     rgba(0, 0, 0, 0.18);

	--color-accent-cyan:       #0891B2;
	--color-accent-cyan-hover: #0E7490;
	--color-accent-cyan-glow:  rgba(8, 145, 178, 0.2);
	--color-accent-purple-glow: rgba(124, 58, 237, 0.15);

	--color-text-primary:   #0F172A;
	--color-text-secondary: #475569;
	--color-text-tertiary:  #94A3B8;

	--shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md:          0 4px 14px rgba(0, 0, 0, 0.1);
	--shadow-lg:          0 10px 40px rgba(0, 0, 0, 0.12);
	--shadow-glow-purple: 0 0 20px rgba(124, 58, 237, 0.15);
	--shadow-glow-cyan:   0 0 20px rgba(8, 145, 178, 0.15);
}