/* ========================================
   DESIGN TOKENS — Erkan Motors
   Dark/Light theme via data-theme attribute
   ======================================== */

:root,
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #0d0d0d;
    --bg-secondary: #141414;
    --bg-tertiary: #1a1a1a;
    --bg-elevated: #222222;

    /* Accent */
    --accent: #ff6a00;
    --accent-hover: #ff8a2e;
    --accent-glow: rgba(255, 106, 0, 0.35);
    --accent-subtle: rgba(255, 106, 0, 0.08);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-bg-hover: rgba(255, 255, 255, 0.06);

    /* Grid overlay */
    --grid-line: rgba(255, 255, 255, 0.035);
    --grid-size: 60px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 4px 24px rgba(255, 106, 0, 0.25);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-accent: rgba(255, 106, 0, 0.3);

    /* Nav */
    --nav-bg: rgba(13, 13, 13, 0.85);

    /* Misc */
    --overlay: rgba(0, 0, 0, 0.6);
    --scrollbar-track: #1a1a1a;
    --scrollbar-thumb: #333333;
}

[data-theme="light"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ebebeb;
    --bg-elevated: #ffffff;

    --accent: #e05500;
    --accent-hover: #c44a00;
    --accent-glow: rgba(224, 85, 0, 0.2);
    --accent-subtle: rgba(224, 85, 0, 0.06);

    --text-primary: #111111;
    --text-secondary: #555555;
    --text-muted: #999999;

    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-bg-hover: rgba(255, 255, 255, 0.8);

    --grid-line: rgba(0, 0, 0, 0.04);
    --grid-size: 60px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-accent: 0 4px 24px rgba(224, 85, 0, 0.15);

    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-accent: rgba(224, 85, 0, 0.25);

    --nav-bg: rgba(245, 245, 245, 0.85);

    --overlay: rgba(255, 255, 255, 0.6);
    --scrollbar-track: #e0e0e0;
    --scrollbar-thumb: #c0c0c0;
}

/* ========================================
   SPACING & LAYOUT TOKENS
   ======================================== */
:root {
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;
    --space-3xl: 8rem;

    --container-max: 1200px;
    --container-padding: 1.5rem;

    --nav-height: 72px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    --transition-fast: 0.2s ease;
    --transition-base: 0.35s ease;
    --transition-slow: 0.6s ease;
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}