/* ============================================================================
   PEGASSI MOTORSPORT — DESIGN SYSTEM TOKENS v2
   Complete CSS custom properties for theming, spacing, typography & elevation.
   Enhanced with richer gradients, multiple glow layers, and premium effects.
   ============================================================================ */

:root {
    /* ── Color Palette ─────────────────────────────────────────────────────── */

    /* Brand */
    --color-green: #5bc069;
    --color-green-hover: #6dd47a;
    --color-green-dim: #3d8a48;
    --color-green-rgb: 91, 192, 105;
    --color-yellow: #f6df1c;
    --color-yellow-hover: #f8e74a;
    --color-yellow-rgb: 246, 223, 28;

    /* Gradients */
    --gradient-green: linear-gradient(135deg, #5bc069 0%, #6dd47a 100%);
    --gradient-green-vivid: linear-gradient(135deg, #4aac5a 0%, #5bc069 50%, #7ade8a 100%);
    --gradient-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
    --gradient-text-hero: linear-gradient(135deg, #ffffff 30%, #5bc069 100%);
    --gradient-dark: linear-gradient(180deg, #3a3a3a 0%, #2e2e2e 100%);

    /* Surfaces */
    --color-bg: #3a3a3a;
    --color-bg-rgb: 58, 58, 58;
    --color-bg-deep: #2e2e2e;
    --color-surface: #4a4a4a;
    --color-surface-rgb: 74, 74, 74;
    --color-surface-hover: #535353;
    --color-surface-elevated: #515151;
    --color-surface-glass: rgba(74, 74, 74, 0.65);

    /* Text */
    --color-text: #ffffff;
    --color-text-secondary: #b8b8b8;
    --color-text-muted: #888888;
    --color-text-faint: #666666;

    /* Semantic */
    --color-success: #5bc069;
    --color-success-rgb: 91, 192, 105;
    --color-warning: #f6df1c;
    --color-warning-rgb: 246, 223, 28;
    --color-danger: #ff6b6b;
    --color-danger-rgb: 255, 107, 107;
    --color-info: #4ea8de;
    --color-info-rgb: 78, 168, 222;

    /* Borders & Overlays */
    --color-border: rgba(255, 255, 255, 0.07);
    --color-border-light: rgba(255, 255, 255, 0.12);
    --color-border-green: rgba(91, 192, 105, 0.2);
    --color-overlay: rgba(0, 0, 0, 0.65);
    --color-glass: rgba(74, 74, 74, 0.72);
    --color-glass-sidebar: rgba(58, 58, 58, 0.82);

    /* ── Typography ────────────────────────────────────────────────────────── */

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Rajdhani', 'Inter', sans-serif;

    /* Fluid scale — gracefully scales from 375px to 1440px viewports */
    --text-xs: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
    /* 11–12px */
    --text-sm: clamp(0.8125rem, 0.775rem + 0.15vw, 0.875rem);
    /* 13–14px */
    --text-base: clamp(0.875rem, 0.825rem + 0.2vw, 1rem);
    /* 14–16px */
    --text-lg: clamp(1.0625rem, 0.975rem + 0.35vw, 1.25rem);
    /* 17–20px */
    --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    /* 20–24px */
    --text-2xl: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
    /* 24–32px */
    --text-3xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem);
    /* 30–44px */

    /* Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ── Spacing (8-point grid) ────────────────────────────────────────────── */

    --space-0: 0;
    --space-1: 0.25rem;
    /* 4px  */
    --space-2: 0.5rem;
    /* 8px  */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */

    /* Fluid content padding */
    --content-padding: clamp(0.75rem, 0.4rem + 1.2vw, 1.25rem);

    /* ── Border Radius ──────────────────────────────────────────────────────── */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 50%;
    --radius-pill: 9999px;

    /* ── Elevation / Shadows ────────────────────────────────────────────────── */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.18);
    --shadow-inner: inset 0 2px 6px rgba(0, 0, 0, 0.15);

    /* Glow shadows */
    --shadow-glow-green: 0 0 20px rgba(91, 192, 105, 0.25), 0 0 6px rgba(91, 192, 105, 0.1);
    --shadow-glow-green-lg: 0 4px 20px rgba(91, 192, 105, 0.35), 0 0 40px rgba(91, 192, 105, 0.1);
    --shadow-glow-danger: 0 0 20px rgba(255, 107, 107, 0.25), 0 0 6px rgba(255, 107, 107, 0.1);
    --shadow-glow-yellow: 0 0 20px rgba(246, 223, 28, 0.2), 0 0 6px rgba(246, 223, 28, 0.08);
    --shadow-glow-info: 0 0 20px rgba(78, 168, 222, 0.2);

    /* Card hover shadow */
    --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.3), 0 0 1px rgba(91, 192, 105, 0.08);

    /* ── Z-Index Scale ──────────────────────────────────────────────────────── */

    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-sidebar: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-mobile-nav: 700;

    /* ── Transitions ────────────────────────────────────────────────────────── */

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;

    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-normal: var(--duration-normal) var(--ease-out);
    --transition-slow: var(--duration-slow) var(--ease-out);
    --transition-spring: var(--duration-normal) var(--ease-spring);

    /* ── Layout Dimensions ──────────────────────────────────────────────────── */

    --sidebar-width: 260px;
    --header-height: 64px;
    --mobile-nav-height: 64px;
    --content-max-width: 1400px;
}