/* ═══════════════════════════════════════════════════════════════════════════
   base.css — Sistema de tokens de ParqueApp (rediseño «bosque editorial»)

   Tres capas, en este orden:

     1. PRIMITIVOS  — la paleta cruda del prototipo aprobado
                      (`parqueapp-rediseno.html`, bloques `:root` y
                      `[data-theme="dark"]`). No significan nada por sí solos
                      y no cambian entre temas.
     2. SEMÁNTICOS  — qué papel cumple cada color. Es la capa que el tema oscuro
                      redefine, junto con las tintas.
     3. TINTAS      — colores de texto pensados para ir SOBRE fondos teñidos
                      (chips, avisos, badges), más los dos rellenos que siempre
                      llevan texto blanco encima.

   Regla del rediseño: ESTA hoja es la única que puede contener colores
   literales; todas las demás consumen estos tokens. Los valores salen del
   prototipo: acá no se inventó ningún color.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────────────────────────── */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ═══ 1. PRIMITIVOS ═════════════════════════════════════════════════════════ */

:root {
    /* `color-scheme: light` evita que, con el sistema operativo en modo oscuro,
       los controles nativos (scrollbars, inputs, selects) se pinten oscuros
       sobre superficies claras. El bloque de tema oscuro lo cambia a `dark`. */
    color-scheme: light;

    /* Verde dosel */
    --canopy-950: #061710;
    --canopy-900: #0B2A1B;
    --canopy-800: #0F3A26;
    --canopy-700: #14512F;
    --canopy-600: #1A663C;
    --canopy-500: #1F7A4C;
    --canopy-300: #6FBF8F;
    --canopy-200: #A9DCC0;
    --canopy-100: #DDF0E5;

    /* Neutros cálidos de papel */
    --paper-0: #FFFFFF;
    --paper-50: #FCFAF6;
    --paper-100: #F7F3EC;
    --paper-200: #EFE9DE;

    /* Arcilla: bordes y textos suaves. El paso 300 es el `paper-300` del
       prototipo, que este plan llama `clay-300`. */
    --clay-300: #E2D9C9;
    --clay-400: #B5A891;
    --clay-500: #8C7F6B;
    --clay-600: #6B6153;
    --clay-700: #5C5346;

    /* Tinta */
    --ink-900: #12160F;

    /* Acento y semánticos */
    --amber-500: #E9A23B;
    --amber-600: #B97C16;
    --amber-700: #8A5A0A;   /* = `--amber-ink` del prototipo en tema claro */

    --success-500: #2E7D5B;
    --success-600: #1F6B4B; /* = `--success-ink` del prototipo en tema claro */
    --danger-500: #C0392B;
    --danger-600: #A82E21;  /* = `--danger-ink` del prototipo en tema claro */
    --info-500: #2E6C9E;
    --info-600: #1E5A8A;    /* = `--info-ink` del prototipo en tema claro */
    --plum-500: #6B4A7A;
    --plum-600: #5B3A6B;    /* = `--plum-ink` del prototipo en tema claro */

    /* Los pasos 700 no existen en el prototipo. Se derivan mezclando el paso
       600 (valor del prototipo) con la tinta más oscura del sistema: no se
       introduce ningún color nuevo, solo una mezcla de dos del prototipo.
       La mezcla es `in srgb` a propósito: Chromium serializa el resultado como
       `color(srgb …)`, que es una notación que la auditoría de contraste
       entiende. Con `in oklab` se serializa como `oklab(…)`, que la auditoría
       NO puede medir: el par quedaría como falla «sin medir» en cuanto una
       tarea usara uno de estos tokens. */
    --success-700: color-mix(in srgb, var(--success-600) 74%, var(--ink-900));
    --danger-700: color-mix(in srgb, var(--danger-600) 74%, var(--ink-900));
    --info-700: color-mix(in srgb, var(--info-600) 74%, var(--ink-900));

    /* Tintes: fondos tenues de chips y avisos. Son la única parte de la paleta
       cruda que el prototipo sí redefine en el tema oscuro (ver más abajo). */
    --amber-100: #FBEBD2;
    --success-100: #DDF1E7;
    --danger-100: #FBE3DF;
    --info-100: #E0EDF8;
    --plum-100: #EFE6F3;
}

/* ═══ 2. SEMÁNTICOS (tema claro) ════════════════════════════════════════════ */

:root {
    --surface: var(--paper-50);          /* tarjetas y paneles */
    --surface-sunken: var(--paper-100);  /* fondo de la app */
    --surface-raised: var(--paper-0);    /* capa elevada: hovers, filas, hojas */

    --border: var(--clay-300);
    --border-strong: var(--clay-400);

    --text: var(--ink-900);
    --text-soft: var(--clay-700);
    --text-faint: var(--clay-600);

    --brand: var(--canopy-700);
    --brand-strong: var(--canopy-800);
    --brand-soft: var(--canopy-100);

    --on-brand: var(--paper-0);     /* texto sobre relleno de marca */
    --ring: rgba(31, 122, 76, .32); /* anillo de foco */
    --scrim: rgba(11, 24, 17, .46); /* velo detrás de hojas y modales */
}

/* ═══ 3. TINTAS (tema claro) ════════════════════════════════════════════════ */

:root {
    --brand-ink: var(--canopy-700);
    --success-ink: var(--success-600);
    --danger-ink: var(--danger-600);
    --info-ink: var(--info-600);
    --amber-ink: var(--amber-700);
    --plum-ink: var(--plum-600);

    /* Rellenos que siempre llevan texto claro encima */
    --danger-fill: var(--danger-500);
    --success-fill: var(--success-500);
}

/* ═══ 3b. HERO DEL PANEL ════════════════════════════════════════════════════
   El `.hero` del prototipo es un `linear-gradient` de tres verdes con un brillo
   ámbar radial. El panel usa una superficie PLANA por una razón medida: la
   auditoría de contraste no puede medir texto sobre un degradado —marca el par
   como `contrast-sin-medir`, y esa marca entra al veredicto—, así que un hero
   con degradado dejaría su titular y su párrafo fuera de toda medición. La
   superficie plana es el verde más oscuro del degradado del prototipo; el brillo
   ámbar se conserva en un pseudo-elemento decorativo (`::after`), que no tiene
   texto encima y por eso no afecta ninguna medición.

   Las dos tintas están medidas sobre `--hero-bg` en los dos temas, todas por
   encima del mínimo AA de 4.5:1. */
:root {
    --hero-bg: var(--canopy-700);
    --hero-text: #F2F8F4;
    --hero-text-soft: #D8E8DD;
    --hero-chip-bg: rgba(255, 255, 255, .13);
    --hero-chip-border: rgba(255, 255, 255, .18);
    --hero-glow: radial-gradient(circle at 30% 30%, rgba(233, 162, 59, .38), transparent 65%);
    --hero-shadow: 0 2px 4px rgba(18, 22, 15, .05), 0 14px 32px -10px rgba(6, 23, 16, .38);
}

/* ═══ 4. TIPOGRAFÍA, ESPACIO, FORMA Y MOVIMIENTO ════════════════════════════ */

:root {
    --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-md: .9375rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;

    /* Espaciado, base 4. Los diez primeros pasos son los del prototipo; del 11
       al 16 continúan el mismo ritmo (+16px) para completar la escala. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 56px;
    --space-10: 72px;
    --space-11: 88px;
    --space-12: 104px;
    --space-13: 120px;
    --space-14: 136px;
    --space-15: 152px;
    --space-16: 168px;

    /* Radios */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;

    /* Sombras por capas */
    --shadow-sm: 0 1px 2px rgba(18, 22, 15, .06), 0 1px 1px rgba(18, 22, 15, .04);
    --shadow-md: 0 2px 4px rgba(18, 22, 15, .05), 0 8px 20px -6px rgba(18, 22, 15, .10);
    --shadow-lg: 0 4px 10px rgba(18, 22, 15, .06), 0 22px 45px -12px rgba(18, 22, 15, .16);
    --shadow-xl: 0 30px 70px -20px rgba(6, 23, 16, .45);

    /* Movimiento */
    --transition-fast: 150ms cubic-bezier(.2, .8, .2, 1);
    --transition-normal: 220ms cubic-bezier(.2, .8, .2, 1);

    /* Alto del área segura inferior del sistema (PWA): se conserva igual. */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══ 5. TEMA OSCURO ════════════════════════════════════════════════════════
   Redefine la capa semántica y las tintas; los primitivos (la paleta cruda) no
   cambian entre temas. Los valores son los del bloque `[data-theme="dark"]` del
   prototipo. */

[data-theme="dark"] {
    --surface: #0F1F17;
    --surface-sunken: #0A140F;
    --surface-raised: #13291E;

    --border: #22392C;
    --border-strong: #33513E;

    --text: #EAF2EC;
    --text-soft: #A3B8AA;
    --text-faint: #7E9488;

    --brand: var(--canopy-300);
    --brand-strong: var(--canopy-200);
    --brand-soft: rgba(111, 191, 143, .14);

    --on-brand: #06170F;
    --ring: rgba(111, 191, 143, .38);
    --scrim: rgba(3, 10, 6, .66);

    --brand-ink: var(--canopy-300);
    --success-ink: #7FD3A4;
    --danger-ink: #F58C7C;
    --info-ink: #8CC2E8;
    --amber-ink: #F3C173;
    --plum-ink: #CBA6DA;

    /* El prototipo redefine los cinco tintes en oscuro: un tinte claro no puede
       ser el fondo tenue de un chip sobre una superficie profunda, porque las
       tintas aclaradas de arriba irían sobre él con el contraste invertido. */
    --amber-100: rgba(233, 162, 59, .16);
    --success-100: rgba(70, 173, 128, .16);
    --danger-100: rgba(224, 96, 78, .16);
    --info-100: rgba(90, 158, 214, .16);
    --plum-100: rgba(178, 140, 199, .16);

    /* El hero se oscurece un paso en tema oscuro (el prototipo cambia su
       degradado de `canopy-800` a `canopy-700`/`canopy-500`). Las dos tintas se
       conservan: sobre el verde más profundo el contraste sube, no baja. */
    --hero-bg: var(--canopy-800);
    --hero-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px -10px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

/* Tema automático: delega en el sistema operativo. Son exactamente los mismos
   valores que el bloque de arriba; si uno cambia, cambian los dos. */

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --surface: #0F1F17;
        --surface-sunken: #0A140F;
        --surface-raised: #13291E;

        --border: #22392C;
        --border-strong: #33513E;

        --text: #EAF2EC;
        --text-soft: #A3B8AA;
        --text-faint: #7E9488;

        --brand: var(--canopy-300);
        --brand-strong: var(--canopy-200);
        --brand-soft: rgba(111, 191, 143, .14);

        --on-brand: #06170F;
        --ring: rgba(111, 191, 143, .38);
        --scrim: rgba(3, 10, 6, .66);

        --brand-ink: var(--canopy-300);
        --success-ink: #7FD3A4;
        --danger-ink: #F58C7C;
        --info-ink: #8CC2E8;
        --amber-ink: #F3C173;
        --plum-ink: #CBA6DA;

        --amber-100: rgba(233, 162, 59, .16);
        --success-100: rgba(70, 173, 128, .16);
        --danger-100: rgba(224, 96, 78, .16);
        --info-100: rgba(90, 158, 214, .16);
        --plum-100: rgba(178, 140, 199, .16);

        --hero-bg: var(--canopy-800);
        --hero-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 32px -10px rgba(0, 0, 0, .55);

        color-scheme: dark;
    }
}

/* ═══ 6. MOVIMIENTO REDUCIDO ════════════════════════════════════════════════
   Quien pidió al sistema menos movimiento no debería recibir transiciones ni
   animaciones largas. `!important` es necesario: sin él, cualquier regla con
   más especificidad vuelve a imponer su duración. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ═══ 7. BASE ═══════════════════════════════════════════════════════════════ */

html,
body {
    font-family: var(--font-ui);
    background: var(--surface-sunken);
    color: var(--text);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ═══ 8. PRIMITIVAS QUE YA VIVÍAN ACÁ ═══════════════════════════════════════ */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.link-btn {
    background: none;
    border: none;
    font-family: inherit;
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    /* Mínimo táctil del sistema. Al pasar a `font-family: inherit` la línea de
       Inter mide 16px en vez de los 15px de Arial, y el arnés identifica cada
       ofensor de `touch-targets` por su alto medido: sin esto, el enlace de las
       pantallas de acceso aparecía como tres fallas NUEVAS (`button.link-btn@16`
       en `auth`, `auth-register` y `auth-verify-email`) en vez de como el mismo
       ofensor de siempre. Con el mínimo, además, deja de ser ofensor. */
    min-height: 44px;
}

.hidden-input {
    display: none;
}