/* ==========================================================================
   WPanel Kurumsal Tasarım Sistemi V2 — Curated Design Tokens & Foundation
   ==========================================================================
   Premium editorial + modern product UI + kurumsal güven felsefesiyle
   tasarlanmış, sıfır bağımlılıklı, yüksek performanslı ve erişilebilir CSS.
   WPanel > Tasarım Ayarları üzerinden dinamik olarak ezilebilir.
   ========================================================================== */

:root {
    /* ─── 1. Marka & Tema Renkleri ─── */
    --color-primary: #B4010F;
    --color-primary-hover: #8F000B;
    --color-primary-active: #700008;
    --color-primary-soft: rgba(180, 1, 15, 0.08);
    --color-primary-subtle: rgba(180, 1, 15, 0.16);
    --color-primary-contrast: #FFFFFF;

    --color-secondary: #EAEAE5;
    --color-secondary-hover: #D9D9D3;
    --color-secondary-active: #C9C9C2;
    --color-secondary-soft: rgba(234, 234, 229, 0.7);
    --color-secondary-subtle: rgba(234, 234, 229, 0.95);
    --color-secondary-contrast: #101112;

    /* ─── 2. Nötr & Yüzey Renkleri ─── */
    --color-dark: #101112;
    --color-dark-surface: #191A1C;
    --color-dark-elevated: #242629;
    --color-dark-contrast: #FFFFFF;

    --color-light: #F7F7F5;
    --color-light-alt: #F0F0ED;
    --color-light-surface: #FFFFFF;

    --color-body-bg: #FFFFFF;
    --color-surface-bg: #FFFFFF;
    --color-surface-muted: #F6F6F3;
    --color-surface-elevated: #FFFFFF;

    --color-overlay-dark: rgba(16, 17, 18, 0.72);
    --color-overlay-dark-heavy: rgba(16, 17, 18, 0.88);
    --color-overlay-light: rgba(255, 255, 255, 0.90);

    --color-white: #FFFFFF;
    --color-black: #000000;

    /* ─── 3. Metin & Çerçeve Renkleri ─── */
    --color-text: #292B2F;
    --color-text-muted: #6B6E75;
    --color-text-light: #9699A0;
    --color-text-inverse: #FFFFFF;

    --color-border: #E2E2DF;
    --color-border-subtle: #EDEDE9;
    --color-border-strong: #C7C7C2;
    --color-border-dark: rgba(255, 255, 255, 0.12);

    /* ─── 4. Durum & Geribildirim Renkleri ─── */
    --color-success: #10B981;
    --color-success-soft: rgba(16, 185, 129, 0.12);
    --color-success-contrast: #FFFFFF;

    --color-warning: #F59E0B;
    --color-warning-soft: rgba(245, 158, 11, 0.12);
    --color-warning-contrast: #101112;

    --color-error: #EF4444;
    --color-error-soft: rgba(239, 68, 68, 0.12);
    --color-error-contrast: #FFFFFF;

    --color-info: #3B82F6;
    --color-info-soft: rgba(59, 130, 246, 0.12);
    --color-info-contrast: #FFFFFF;

    /* ─── 5. Tipografi (Yazı Tipleri & Akıcı Skala) ─── */
    --font-body: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --font-size-2xs: 0.6875rem;
    /* 11px */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-md: 1.0625rem;
    /* 17px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: clamp(1.2rem, 1.1vw + 0.5rem, 1.35rem);
    /* 19-22px */
    --font-size-3xl: clamp(1.4rem, 1.6vw + 0.5rem, 1.75rem);
    /* 22-28px */
    --font-size-4xl: clamp(1.75rem, 2.4vw + 0.5rem, 2.25rem);
    /* 28-36px */
    --font-size-5xl: clamp(2rem, 3.2vw + 0.5rem, 2.75rem);
    /* 32-44px */
    --font-size-display: clamp(2.2rem, 3.8vw + 0.5rem, 3.4rem);
    /* 35-54px */

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    --lh-none: 1;
    --lh-tight: 1.15;
    --lh-snug: 1.32;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    --tracking-tighter: -0.035em;
    --tracking-tight: -0.018em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;

    /* ─── 6. Boşluklar (Spacing Scale) ─── */
    --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;

    /* Semantic Section Spacing */
    --section-space-compact: clamp(40px, 5vw, 64px);
    --section-space-normal: clamp(64px, 7.5vw, 100px);
    --section-space-spacious: clamp(80px, 10vw, 136px);
    --section-padding-y: var(--section-space-normal);

    /* ─── 7. Konteyner & Grid Sistemi ─── */
    --container-narrow: 840px;
    --container-content: 1040px;
    --container-default: 1240px;
    --container-wide: 1440px;
    --container-full: 100%;
    --container-max-width: var(--container-default);
    --container-padding: clamp(16px, 3.5vw, 36px);

    /* ─── 8. Geometri & Kenar Yuvarlaklıkları (Radius) ─── */
    --radius-none: 0px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* ─── 9. Gölgeler & Derinlik (Elevation) ─── */
    --shadow-xs: 0 1px 3px rgba(16, 17, 18, 0.04);
    --shadow-sm: 0 2px 8px rgba(16, 17, 18, 0.05);
    --shadow-md: 0 6px 20px rgba(16, 17, 18, 0.07);
    --shadow-lg: 0 14px 34px rgba(16, 17, 18, 0.10);
    --shadow-xl: 0 24px 56px rgba(16, 17, 18, 0.14);
    --shadow-hover: 0 14px 32px rgba(180, 1, 15, 0.16);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

    /* ─── 10. Z-Index Katmanları ─── */
    --z-base: 1;
    --z-card: 10;
    --z-sticky: 100;
    --z-bottom-bar: 900;
    --z-sticky-actions: 950;
    --z-header: 1000;
    --z-drawer-backdrop: 1100;
    --z-drawer: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-toast: 1500;
    --z-top: 9999;

    /* ─── 11. Geçişler & Animasyonlar (Motion & Emil / Apple Physics) ─── */
    --ease-spring: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-smooth: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    --duration-instant: 100ms;
    --duration-fast: 160ms;
    --duration-normal: 240ms;
    --duration-smooth: 340ms;
    --duration-stagger: 50ms;

    --transition-fast: var(--duration-fast) var(--ease-spring);
    --transition-base: var(--duration-normal) var(--ease-out-expo);
    --transition-smooth: var(--duration-smooth) var(--ease-out-expo);
    --transition-spring: 0.5s var(--ease-spring);
    --ease-out: var(--ease-out-expo);
    --ease-in-out: var(--ease-in-out-smooth);

    /* ─── 12. Apple Translucent Glass & Derinlik Tokenları ─── */
    --glass-blur: blur(20px) saturate(180%);
    --glass-bg-light: rgba(255, 255, 255, 0.75);
    --glass-bg-dark: rgba(16, 17, 18, 0.82);
    --glass-border-light: rgba(255, 255, 255, 0.4);
    --glass-border-dark: rgba(255, 255, 255, 0.12);
    --glass-edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --glass-edge-dark: inset 0 1px 0 rgba(255, 255, 255, 0.15);

    /* ─── 13. Geriye Dönük Uyumluluk (Legacy Aliases) ─── */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --dark-color: var(--color-dark);
    --light-color: var(--color-light);
    --text-color: var(--color-text);
    --border-color: var(--color-border);
    --font-family: var(--font-body);
    --container-max: var(--container-max-width);
}