/* ===========================
   ROOT
=========================== */

:root{

    /* COLORS */

    --color-bg:#000000;
    --color-surface:#111111;

    --color-text:#f5f5f5;

    --color-muted:#a8a8a8;

    --color-accent:#F2A21B;

    --color-shadow:rgba(0,0,0,.28);

    --color-overlay:rgba(0,0,0,.42);

    --color-header:rgba(0,0,0,.18);

    --color-border:rgba(255,255,255,.08);



    /* TYPOGRAPHY */

    --font-main:
        Inter,
        Helvetica,
        Arial,
        sans-serif;

    --font-size-xs:.75rem;

    --font-size-sm:.875rem;

    --font-size-md:1rem;

    --font-size-lg:1.25rem;

    --font-size-xl:2rem;

    --font-size-hero:clamp(2rem,6vw,4.5rem);



    /* SPACING */

    --space-1:.25rem;

    --space-2:.5rem;

    --space-3:1rem;

    --space-4:1.5rem;

    --space-5:2rem;

    --space-6:3rem;

    --space-7:5rem;



    /* LAYOUT */

    --header-height:72px;

    --container-width:1400px;

    --container-padding:32px;

    --section-gap:160px;



    /* RADIUS */

    --radius-sm:8px;

    --radius-md:16px;

    --radius-lg:24px;



    /* SHADOWS */

    --shadow-soft:

        0 20px 60px rgba(0,0,0,.28);

    --shadow-poster:

        0 30px 80px rgba(0,0,0,.35);



    /* TRANSITIONS */

    --transition-fast:.2s ease;

    --transition:.4s cubic-bezier(.22,.61,.36,1);

    --transition-slow:.9s cubic-bezier(.22,.61,.36,1);



    /* Z INDEX */

    --z-header:100;

    --z-poster:20;

    --z-modal:1000;

}