/**
 * Design tokens — responsive mimari omurgası
 * Breakpoint referansı (media query’lerde aynı px değerleri kullanılır):
 *   sm: 480px | md: 768px | lg: 992px | xl: 1200px | 2xl: 1600px
 * Mobil:     0 – 767px   (max-width: 767px)
 * Tablet:    768 – 1024px (min-width: 768px) and (max-width: 1024px)
 * Masaüstü:  1025px+     (min-width: 1025px)
 * Mobil+tablet chrome (header alt bar): max-width: 1024px
 */

:root {
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-2xl: 1600px;

    --bp-mobile-max: 767px;
    --bp-tablet-min: 768px;
    --bp-tablet-max: 1024px;
    --bp-desktop-min: 1025px;
    --bp-chrome-mobile-max: 1024px;

    --container-max: 1600px;
    --container-padding: clamp(12px, 2.5vw, 40px);
    --container-padding-tight: clamp(10px, 2vw, 16px);

    --space-xs: clamp(4px, 0.5vw, 8px);
    --space-sm: clamp(8px, 1vw, 12px);
    --space-md: clamp(12px, 1.5vw, 20px);
    --space-lg: clamp(16px, 2vw, 32px);
    --space-xl: clamp(20px, 2.5vw, 40px);

    --font-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
    --font-sm: clamp(0.75rem, 0.72rem + 0.2vw, 0.8125rem);
    --font-base: clamp(0.8125rem, 0.78rem + 0.25vw, 0.875rem);
    --font-md: clamp(0.875rem, 0.82rem + 0.35vw, 1rem);
    --font-lg: clamp(1rem, 0.92rem + 0.5vw, 1.125rem);
    --font-xl: clamp(1.125rem, 1rem + 0.75vw, 1.375rem);

    --dashboard-sidebar-width: clamp(260px, 20vw, 320px);
    --dashboard-gap: clamp(12px, 1.5vw, 15px);
    --card-pad-x: clamp(18px, 2vw, 28px);
    --card-pad-y: clamp(18px, 2vw, 22px);
}

html {
    scrollbar-gutter: stable;
}

/**
 * Premium dark-gaming paleti (Hesap.com.tr / İtemsatis estetiği)
 * Tüm değerler body.dark-mode içinde aktif; fallback'ler dark-theme-global.css'te.
 */
body.dark-mode {
    --site-page-bg: #0b0c10;
    --header-strip-bg: #14151a;
    --header-strip-border: #2d3139;
    --surface-card: #14151a;
    --surface-elevated: #14151a;
    --surface-hover: #1a1c23;
    --surface-inset: #121318;
    --chrome-control-bg: #1a1c23;
    --chrome-control-border: #2d3139;
    --accent-primary: #ff6b00;
    --accent-primary-hover: #ff8533;
    --accent-primary-active: #e65f00;
    --accent-primary-glow: rgba(255, 107, 0, 0.32);
    --accent-primary-soft: rgba(255, 107, 0, 0.12);
    --accent-link: #e8a66a;
    --accent-link-hover: #ffb87a;
    --text-heading: #ffffff;
    --text-body: #e8eaed;
    --text-muted: #94a3b8;
    --text-faint: #a0aec0;
    --focus-ring: rgba(255, 107, 0, 0.35);
    --focus-border: #ff6b00;
    --transition-premium: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}