/* ==========================================================
 * TOKENS — custom properties shared by every stylesheet.
 * Load order (index.html / 404.html):
 *   tokens → base → layout → components → home → reel → universe → transition
 *
 * Breakpoints (media queries can't read custom properties, so they are
 * documented here and written literally in each file):
 *   S  : max-width: 599px            (phones, portrait)
 *   M  : 600px – 1023px              (large phones, tablets)
 *   L  : min-width: 1024px           (desktop)
 *   Landscape phones: (max-height: 500px) and (orientation: landscape)
 *   Touch: (pointer: coarse)  ·  Real hover: (hover: hover) and (pointer: fine)
 * ========================================================== */
:root {
    /* Colour */
    --color-primario: #00FFFF;        /* cyan — Music / Home */
    --color-work-accent: #F000FF;     /* magenta — Sound / Work */
    --color-redesign-accent: #ffb400; /* amber — reel "redesigns" */
    --color-fondo: #08080c;
    --color-fondo-secundario: #121218;
    --color-superficie: #101016;
    --color-drawer: #0b0b10;
    --color-borde: rgba(255, 255, 255, 0.08);
    --color-texto: #f2f2ee;
    --color-texto-secundario: #9a9aa5;

    /* Type */
    --font-display: 'Space Grotesk', 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Layout */
    --navbar-height: 60px;
    --section-max: 1200px;
    --gutter: 2rem;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;

    /* Safe areas (viewport-fit=cover) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 400ms;
    --dur-4: 700ms;

    /* Stacking (z-index) */
    --z-canvas: 0;
    --z-content: 10;
    --z-hud: 20;
    --z-nav: 100;
    --z-overlay: 1000;
    --z-modal: 10000;
    --z-tutorial: 12000;
    --z-toast: 20000;
    --z-dialog: 30000;
    --z-transition: 40000;

    color-scheme: dark;
}

@media (max-width: 599px) {
    :root { --gutter: 1.25rem; }
}