/* ============================================================
   CODESIX - DESIGN TOKENS
   Apple-inspired dark palette, refined spacing, massive type.
   ============================================================ */

:root {
    /* ── Background (lighter dark palette) ────── */
    --bg: #111114;
    --bg-raised: #18181c;
    --bg-card: #1e1e24;
    --bg-card-hover: #26262e;
    --bg-surface: #2a2a32;

    /* ── Brand ────────────────────────────────── */
    --crimson: #DA0B48;
    --crimson-bright: #ff1a5e;
    --crimson-glow: rgba(218, 11, 72, 0.15);
    --crimson-soft: rgba(218, 11, 72, 0.08);
    --crimson-faint: rgba(218, 11, 72, 0.04);

    --cyan: #00e5ff;
    --cyan-glow: rgba(0, 229, 255, 0.08);

    /* ── Text (Apple dark mode palette) ───────── */
    --text-1: #f5f5f7;
    --text-2: #86868b;
    --text-3: #48484a;
    --text-4: #2c2c2e;

    /* ── Borders ──────────────────────────────── */
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-active: rgba(218, 11, 72, 0.35);

    /* ── Typography ───────────────────────────── */
    --font-display: 'Syne', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* ── Layout ───────────────────────────────── */
    --max-w: 1320px;
    --gutter: clamp(20px, 5vw, 80px);
    --nav-h: 80px;
    --section-py: clamp(100px, 14vw, 200px);

    /* ── Spacing (4px base) ───────────────────── */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;
    --s9: 96px;
    --s10: 128px;
    --s11: 160px;

    /* ── Radius ───────────────────────────────── */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 20px;
    --r-full: 9999px;

    /* ── Shadows ──────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
    --shadow-crimson: 0 8px 32px rgba(218, 11, 72, .25);
    --shadow-crimson-lg: 0 20px 60px rgba(218, 11, 72, .30);

    /* ── Easing ───────────────────────────────── */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.45, 0, .55, 1);
    --t-fast: .2s var(--ease);
    --t-base: .35s var(--ease);
    --t-slow: .6s var(--ease);

    /* ── Z-index ──────────────────────────────── */
    --z-bg: 0;
    --z-content: 10;
    --z-nav: 1000;
}