/* ========================================================================
   Stok — Tasarım Sistemi Tokenları (Premium)
   Kaynak: docs/42_DESIGN_SYSTEM.md
   ======================================================================== */

:root {
    /* Font */
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-display: "Inter", "Segoe UI", system-ui, sans-serif;

    /* Surface (dark-first) */
    --surface-base: #070A13;
    --surface-primary: #0E1320;
    --surface-secondary: #141A2B;
    --surface-elevated: #1A2135;
    --surface-raised: #232B42;
    --surface-hover: #2B3552;

    /* Premium gradient surfaces (cards, panels) */
    --grad-surface: linear-gradient(145deg, #151B2E 0%, #0C111D 100%);
    --grad-surface-hover: linear-gradient(145deg, #1C2337 0%, #0F1523 100%);
    --grad-brand: linear-gradient(135deg, #2B66E8 0%, #548BF5 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(43,102,232,0.18), rgba(84,139,245,0.08));
    --grad-ambient: radial-gradient(1200px 600px at 8% -10%, rgba(43,102,232,0.08), transparent 55%),
                    radial-gradient(900px 500px at 110% 110%, rgba(124,106,242,0.06), transparent 50%);
    --grad-hero: linear-gradient(135deg, #0E1320 0%, #1A2135 50%, #0E1320 100%);
    --grad-text-strong: linear-gradient(180deg, #FFFFFF 0%, #B8C0D4 100%);
    --grad-number: linear-gradient(180deg, #FFFFFF 0%, #8BB0FA 120%);
    --grad-accent-line: linear-gradient(90deg, transparent, rgba(84,139,245,0.6), rgba(139,176,250,1), rgba(84,139,245,0.6), transparent);

    /* Text */
    --text-strong: #FFFFFF;
    --text-primary: #E4E9F2;
    --text-muted: #98A2B8;
    --text-subtle: #68718A;

    /* Brand */
    --brand: #2B66E8;
    --brand-bright: #548BF5;
    --brand-glow: #8BB0FA;
    --brand-deep: #1E4CCC;
    --brand-muted: rgba(43, 102, 232, 0.12);
    --brand-ring: rgba(43, 102, 232, 0.28);

    /* Accent palette (chart-ready) */
    --accent-violet: #7C6AF2;
    --accent-cyan: #00C9DB;
    --accent-rose: #F0597A;
    --accent-amber: #F5B142;
    --accent-emerald: #17B888;

    /* Status */
    --success: #17B888;
    --success-bg: rgba(23, 184, 136, 0.14);
    --success-ring: rgba(23, 184, 136, 0.28);
    --warning: #E9A73C;
    --warning-bg: rgba(233, 167, 60, 0.14);
    --warning-ring: rgba(233, 167, 60, 0.28);
    --danger: #E14C4C;
    --danger-bg: rgba(225, 76, 76, 0.14);
    --danger-ring: rgba(225, 76, 76, 0.28);
    --info: #4AA6DE;
    --info-bg: rgba(74, 166, 222, 0.14);
    --info-ring: rgba(74, 166, 222, 0.28);

    /* Borders */
    --border-subtle: rgba(152, 162, 184, 0.08);
    --border-soft: rgba(152, 162, 184, 0.14);
    --border-strong: rgba(152, 162, 184, 0.22);
    --border-brand: rgba(43, 102, 232, 0.35);
    --border-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* Font size */
    --fs-xs: 0.72rem;
    --fs-sm: 0.82rem;
    --fs-md: 0.92rem;
    --fs-lg: 1.06rem;
    --fs-xl: 1.38rem;
    --fs-2xl: 1.80rem;
    --fs-3xl: 2.20rem;
    --fs-4xl: 2.80rem;
    --fs-display: 3.40rem;

    /* Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* Radius */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* Shadow (premium: outer + inset highlight) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
    --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.05);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255,255,255,0.06);
    --shadow-float: 0 20px 40px -5px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.08);
    --shadow-brand-sm: 0 0 18px rgba(43, 102, 232, 0.28);
    --shadow-brand-md: 0 10px 30px -4px rgba(43, 102, 232, 0.4);
    --shadow-brand-lg: 0 20px 60px -10px rgba(43, 102, 232, 0.55);
    --shadow-success-glow: 0 0 24px rgba(23, 184, 136, 0.32);
    --shadow-warning-glow: 0 0 24px rgba(233, 167, 60, 0.32);
    --shadow-danger-glow: 0 0 24px rgba(225, 76, 76, 0.32);

    /* Motion */
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-smooth: 380ms;
    --dur-slow: 600ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
    --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* Z-index */
    --z-dropdown: 400;
    --z-sticky: 500;
    --z-modal-bd: 1000;
    --z-modal: 1010;
    --z-toast: 1100;
    --z-tooltip: 1200;
    --z-sidebar: 100;
    --z-sidebar-overlay: 99;

    /* Layout */
    --sidebar-width: 252px;
    --sidebar-collapsed: 72px;
    --topbar-height: 72px;
    --content-max: 1440px;
}

/* ========== LIGHT TEMA (premium, referanstan özümsenmiş) ========== */
html.theme-light {
    --surface-base: #EEF1F8;
    --surface-primary: #FFFFFF;
    --surface-secondary: #F7F9FC;
    --surface-elevated: #FFFFFF;
    --surface-raised: #F1F4FA;
    --surface-hover: #E6ECF6;

    --text-strong: #0B1226;
    --text-primary: #1E2740;
    --text-muted: #55607A;
    --text-subtle: #8490AB;

    --border-subtle: rgba(13, 21, 48, 0.08);
    --border-soft: rgba(13, 21, 48, 0.12);
    --border-strong: rgba(13, 21, 48, 0.18);
    --border-brand: rgba(43, 102, 232, 0.30);

    --grad-surface: linear-gradient(165deg, #FFFFFF 0%, #F5F8FD 100%);
    --grad-surface-hover: linear-gradient(165deg, #FFFFFF 0%, #ECF1F9 100%);
    --grad-ambient: radial-gradient(1200px 600px at 8% -10%, rgba(43,102,232,0.06), transparent 55%),
                    radial-gradient(900px 500px at 110% 110%, rgba(124,106,242,0.04), transparent 50%);
    --grad-hero: linear-gradient(135deg, #F5F8FD 0%, #E5ECF7 50%, #F5F8FD 100%);
    --grad-text-strong: linear-gradient(180deg, #0B1226 0%, #334166 100%);
    --grad-number: linear-gradient(180deg, #0B1226 0%, #2B66E8 140%);

    --shadow-xs: 0 1px 2px rgba(13, 21, 48, 0.05);
    --shadow-sm: 0 2px 10px rgba(13, 21, 48, 0.08);
    --shadow-md: 0 10px 28px rgba(13, 21, 48, 0.09);
    --shadow-lg: 0 20px 48px rgba(13, 21, 48, 0.12);
    --shadow-xl: 0 28px 64px rgba(13, 21, 48, 0.14);
    --shadow-float: 0 24px 48px -8px rgba(30, 60, 120, 0.18), 0 0 0 1px rgba(13, 21, 48, 0.04);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}