/* =========================================================================
   Design Tokens — CSS Custom Properties
   ========================================================================= */

:root {
	/* Renkler */
	--color-primary:     #fe000d;
	--color-primary-dark: #cc000a;
	--color-primary-light: #ffe5e6;
	--color-secondary:   #16213e;
	--color-accent:      #0f3460;
	--color-highlight:   #e94560;

	/* Nötr renkler */
	--color-white:       #ffffff;
	--color-black:       #000000;
	--color-bg:          #ffffff;
	--color-bg-alt:      #f9fafb;
	--color-bg-dark:     #16213e;
	--color-border:      #e2e8f0;
	--color-border-dark: #cbd5e1;

	/* Metin */
	--color-text:        #1e293b;
	--color-text-light:  #64748b;
	--color-text-muted:  #94a3b8;
	--color-text-invert: #ffffff;

	/* Tipografi */
	--font-sans:    'Poppins', system-ui, -apple-system, sans-serif;
	--font-mono:    'Fira Code', 'Courier New', monospace;

	--text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8rem);
	--text-sm:   clamp(0.875rem, 0.825rem + 0.25vw, 0.925rem);
	--text-base: clamp(1rem,     0.95rem + 0.25vw, 1.0625rem);
	--text-lg:   clamp(1.125rem, 1rem    + 0.625vw, 1.25rem);
	--text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
	--text-2xl:  clamp(1.5rem,   1.25rem + 1.25vw, 2rem);
	--text-3xl:  clamp(1.875rem, 1.5rem  + 1.875vw, 2.5rem);
	--text-4xl:  clamp(2.25rem,  1.75rem + 2.5vw, 3.25rem);

	--font-light:    300;
	--font-regular:  400;
	--font-medium:   500;
	--font-semibold: 600;
	--font-bold:     700;
	--font-extrabold: 800;

	--leading-tight:  1.25;
	--leading-snug:   1.375;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75;

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

	/* Border radius */
	--radius-sm:  4px;
	--radius-md:  8px;
	--radius-lg:  12px;
	--radius-xl:  16px;
	--radius-2xl: 24px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-xs:  0 1px 2px rgba(0,0,0,.06);
	--shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
	--shadow-md:  0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
	--shadow-lg:  0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.04);
	--shadow-xl:  0 20px 25px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.04);

	/* Transitions */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   400ms ease;

	/* Layout */
	--container-max:     1400px;
	--container-padding: 0;
	--header-height:     117px;
	--topbar-height:     52px;
}

@media (max-width: 768px) {
	:root {
		--container-padding: 1rem;
	}
}