/* ============================================================
   RCN Design System — Tokens
   Racing Car Network premium marketplace
   ============================================================ */

:root {
    /* === Brand colors === */
    --rcn-brand: #DC2626;
    --rcn-brand-dark: #B91C1C;
    --rcn-brand-light: #FEE2E2;
    --rcn-brand-glow: rgba(220, 38, 38, 0.15);
    --rcn-accent-yellow: #FCD34D;
    --rcn-accent-green: #22C55E;
    --rcn-accent-blue: #2563EB;

    /* === Neutral palette === */
    --rcn-bg: #F7F8FA;
    --rcn-surface: #FFFFFF;
    --rcn-surface-elevated: #FFFFFF;
    --rcn-surface-alt: #F1F5F9;
    --rcn-dark: #0F172A;
    --rcn-dark-elevated: #1E293B;
    --rcn-dark-alt: #334155;

    /* === Text === */
    --rcn-text: #0F172A;
    --rcn-text-muted: #64748B;
    --rcn-text-subtle: #94A3B8;
    --rcn-text-on-brand: #FFFFFF;
    --rcn-text-on-dark: #F1F5F9;
    --rcn-text-link: #DC2626;

    /* === Borders === */
    --rcn-border: #E2E8F0;
    --rcn-border-strong: #CBD5E1;
    --rcn-border-dark: rgba(255, 255, 255, 0.08);

    /* === States === */
    --rcn-success: #10B981;
    --rcn-success-bg: #D1FAE5;
    --rcn-warning: #F59E0B;
    --rcn-warning-bg: #FEF3C7;
    --rcn-danger: #EF4444;
    --rcn-danger-bg: #FEE2E2;
    --rcn-info: #3B82F6;
    --rcn-info-bg: #DBEAFE;

    /* === Spacing scale === */
    --rcn-space-0: 0;
    --rcn-space-1: 4px;
    --rcn-space-2: 8px;
    --rcn-space-3: 12px;
    --rcn-space-4: 16px;
    --rcn-space-5: 20px;
    --rcn-space-6: 24px;
    --rcn-space-8: 32px;
    --rcn-space-10: 40px;
    --rcn-space-12: 48px;
    --rcn-space-16: 64px;
    --rcn-space-20: 80px;
    --rcn-space-24: 96px;

    /* === Radius === */
    --rcn-radius-sm: 6px;
    --rcn-radius: 10px;
    --rcn-radius-lg: 14px;
    --rcn-radius-xl: 20px;
    --rcn-radius-full: 9999px;

    /* === Shadows === */
    --rcn-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --rcn-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --rcn-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
    --rcn-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
    --rcn-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);
    --rcn-shadow-brand: 0 4px 14px rgba(220, 38, 38, 0.28);
    --rcn-shadow-brand-lg: 0 8px 24px rgba(220, 38, 38, 0.36);

    /* === Typography === */
    --rcn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --rcn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --rcn-font-display: 'Inter', sans-serif;

    --rcn-text-xs: 11px;
    --rcn-text-sm: 13px;
    --rcn-text-base: 15px;
    --rcn-text-md: 16px;
    --rcn-text-lg: 18px;
    --rcn-text-xl: 22px;
    --rcn-text-2xl: 28px;
    --rcn-text-3xl: 36px;
    --rcn-text-4xl: 48px;
    --rcn-text-5xl: 60px;

    --rcn-leading-tight: 1.15;
    --rcn-leading: 1.5;
    --rcn-leading-relaxed: 1.7;

    --rcn-tracking-tight: -0.02em;
    --rcn-tracking: 0;
    --rcn-tracking-wide: 0.04em;
    --rcn-tracking-wider: 0.08em;

    /* === Transitions === */
    --rcn-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --rcn-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === Layout === */
    --rcn-container: 1280px;
    --rcn-container-wide: 1440px;
    --rcn-header-h: 72px;
    --rcn-sticky-top: 80px;

    /* === Z-index === */
    --rcn-z-base: 1;
    --rcn-z-dropdown: 100;
    --rcn-z-sticky: 200;
    --rcn-z-overlay: 800;
    --rcn-z-modal: 900;
    --rcn-z-toast: 1000;
}

[data-theme="dark"] {
    --rcn-bg: #0A0E1A;
    --rcn-surface: #131725;
    --rcn-surface-elevated: #1A1F30;
    --rcn-surface-alt: #232940;
    --rcn-text: #F1F5F9;
    --rcn-text-muted: #94A3B8;
    --rcn-text-subtle: #64748B;
    --rcn-border: #232940;
    --rcn-border-strong: #334155;
}