/* ==========================================================================
   Design Tokens & CSS Custom Properties
   RedRing Design System — v0.1.0-alpha
   ========================================================================== */

:root {
    /* ── Backgrounds ── */
    --bg-main: #0B0B0B;
    --bg-sec: #111111;
    --bg-card: #161616;
    --bg-card-hover: #1c1c1c;
    --bg-elevated: #1a1a1a;

    /* ── Text ── */
    --text-main: #FFFFFF;
    --text-muted: #A1A1AA;
    --text-dark: #71717A;
    --text-faint: #52525B;

    /* ── Accent (RedRing Red) ── */
    --accent: #E63946;
    --accent-hover: #d62b39;
    --accent-glow: rgba(230, 57, 70, 0.15);
    --accent-glow-strong: rgba(230, 57, 70, 0.4);
    --accent-glow-subtle: rgba(230, 57, 70, 0.08);

    /* ── Borders ── */
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.25);

    /* ── Typography ── */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Spacing Scale ── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    --space-6xl: 10rem;

    /* ── Layout ── */
    --nav-height: 80px;
    --nav-height-scrolled: 64px;
    --container-width: 1280px;
    --container-narrow: 800px;
    --container-form: 600px;

    /* ── Radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
    --shadow-accent: 0 0 30px var(--accent-glow);

    /* ── Easing ── */
    --easing: cubic-bezier(0.25, 1, 0.5, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── Transitions ── */
    --transition-fast: 0.15s var(--easing);
    --transition-base: 0.3s var(--easing);
    --transition-slow: 0.5s var(--easing);
    --transition-page: 0.6s var(--easing);

    /* ── Z-Index Scale ── */
    --z-background: -2;
    --z-bg-effects: -1;
    --z-base: 1;
    --z-card: 2;
    --z-dropdown: 10;
    --z-sticky: 50;
    --z-nav: 100;
    --z-modal: 200;
    --z-loader: 9999;
}