/* ══════════════════════════════════════
   DESIGN TOKENS v5 — MOTION EDITION
══════════════════════════════════════ */

:root {
    /* ── Palette ── */
    --bg:        #0d0d0f;
    --dark:      #0d0d0f;
    --surface:   #111115;
    --surface-2: #18181f;
    --border:    rgba(255,255,255,0.07);
    --white:     #FFFFFF;
    --cream:     #F0EDE8;
    --green:     #00c8ff;
    --violet:    #7c6aff;
    --sky:       #38bdf8;
    --amber:     #f59e0b;

    /* ── Typography ── */
    --font-display: 'Syne', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-mono:    'Courier New', monospace;

    /* ── Spacing ── */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;
    --space-2xl: 8rem;

    /* ── Border-radius ── */
    --radius-pill: 999px;
    --radius-card: 12px;
    --radius-sm:   6px;

    /* ── Transitions ── */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:    cubic-bezier(0.76, 0, 0.24, 1);
    --spring:         cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --snap:           cubic-bezier(0.87, 0, 0.13, 1);
    --glide:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-fast:  0.3s;
    --duration-base:  0.8s;
    --duration-slow:  0.9s;

    /* ── Z-index layers ── */
    --z-preloader: 9000;
    --z-cursor:    9999;
    --z-nav:        200;
    --z-hero-ui:     10;
    --z-hero-vignette: 2;
    --z-hero-photo:    1;
    --z-marquee:       3;
}