/*
 * Design tokens definidos durante la Fase 0.
 * Este archivo no activa animaciones ni estilos de layout por sí solo.
 */

:root {
    color-scheme: light dark;

    /* Color */
    --color-paper: #ffffff;
    --color-paper-soft: #f4f4f1;
    --color-ink: #242424;
    --color-ink-soft: #424242;
    --color-muted: #9e9e9e;
    --color-line: rgba(36, 36, 36, 0.34);
    --color-dark: #151515;
    --color-black: #000000;
    --color-light: #e0e0e0;
    --color-white: #ffffff;
    --color-focus: #ff5a1f;

    /* Tipografía */
    --font-title: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
    --font-subtitle: "Bebas Neue", "Arial Narrow", sans-serif;
    --font-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-sans: var(--font-text);
    --font-mono: var(--font-subtitle);
    --font-script: var(--font-title);

    --font-hero: clamp(5.5rem, 12.8125vw, 10.25rem);
    --font-display-xl: clamp(4.75rem, 9vw, 9rem);
    --font-display: clamp(3.5rem, 7.5vw, 6rem);
    --font-heading: clamp(2rem, 3.75vw, 3rem);
    --font-body: 1rem;
    --font-ui: 0.875rem;
    --font-small: 0.75rem;

    --leading-hero: 0.8;
    --leading-display: 0.82;
    --leading-heading: 0.9;
    --leading-body: 1.4;
    --leading-ui: 1;

    --tracking-tight: -0.02em;
    --tracking-ui: 0.03em;

    /* Layout */
    --page-gutter: clamp(1rem, 5vw, 4rem);
    --content-max: 90rem;
    --header-height: 5.5rem;
    --section-gap: clamp(6rem, 12vw, 12rem);
    --grid-gap: clamp(1rem, 2vw, 2rem);

    /* Espaciado */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* Bordes */
    --border-hairline: 1px solid var(--color-line);
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;

    /* Movimiento */
    --duration-instant: 120ms;
    --duration-fast: 220ms;
    --duration-normal: 450ms;
    --duration-slow: 700ms;
    --duration-scene: 900ms;
    --duration-loader: 2600ms;
    --stagger-tight: 18ms;
    --stagger-normal: 42ms;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-linear: linear;

    /* Capas */
    --z-content: 1;
    --z-sticky: 10;
    --z-header: 50;
    --z-overlay: 80;
    --z-loader: 100;
}

@media (max-width: 767px) {
    :root {
        --header-height: 4.5rem;
        --section-gap: 6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 1ms;
        --duration-normal: 1ms;
        --duration-slow: 1ms;
        --duration-scene: 1ms;
        --duration-loader: 1ms;
        --stagger-tight: 0ms;
        --stagger-normal: 0ms;
    }
}