/* ═══════════════════════════════════════════════════════════
   VISIO — Design Tokens v3
   Cada valor justifica su presencia.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta ──────────────────────────────────────────── */
    --black: #0A0A0A;
    --white: #FFFFFF;
    --accent: #C8FF00;
    --gray: #6B6B6B;
    --gray-dim: #1A1A1A;
    --surface: #111111;
    --border: #222222;
    --border-lt: #E5E5E5;

    /* ── Tipografía ──────────────────────────────────────── */
    --font-display: 'Roboto Mono', monospace;
    --font-body: 'Roboto Mono', monospace;
    --font-mono: 'Roboto Mono', monospace;

    /* ── Escala — con mucha tensión ──────────────────────── */
    --text-hero: clamp(100px, 18vw, 220px);
    --text-display: clamp(48px, 7vw, 96px);
    --text-heading: clamp(28px, 4vw, 56px);
    --text-manifesto: clamp(24px, 3vw, 44px);
    --text-cap: clamp(36px, 5vw, 72px);
    --text-body: clamp(15px, 1.2vw, 18px);
    --text-meta: 11px;

    /* ── Pesos ───────────────────────────────────────────── */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    /* ── Espaciado ───────────────────────────────────────── */
    --section-pad: clamp(80px, 12vw, 160px);
    --gutter: clamp(24px, 4vw, 64px);
    --max-width: 1400px;

    /* ── Transitions ─────────────────────────────────────── */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-sharp: cubic-bezier(0.76, 0, 0.24, 1);
    --radius: 2px;
}