@charset "utf-8";

/* =====================================================================
   DESIGN TOKENS — Teatro Andino Kusi Wasi
   Versión 1.0 · propuesta (NO está conectada al sitio todavía)

   Este archivo NO reemplaza a public/assets/css/tipografia.css: la EXTIENDE.
   Los nombres antiguos (--c-dorado, --c-vino, --t-h1…) se conservan como alias al final,
   así se puede adoptar por fases sin romper nada (ver DESIGN_SYSTEM.md, sección 25).

   Nombre → uso → razón. Todos los contrastes están calculados (WCAG 2.1) en DESIGN_SYSTEM.md §3 y §21.
   ===================================================================== */

:root {
    /* ───────────── COLOR · marca ───────────── */
    --color-primary:            #9d0606;   /* Rojo Cochinilla · acciones (CTA)          · blanco encima 8,5:1 */
    --color-primary-hover:      #b50707;   /* hover del CTA                              · blanco encima 7,0:1 */
    --color-primary-active:     #7a0404;   /* presionado                                 · blanco encima 11,4:1 */
    --color-primary-deep:       #600000;   /* fin del degradé del CTA                    · blanco encima 14,0:1 */

    --color-secondary:          #dd910d;   /* Oro Inti · identidad: títulos H1, íconos, acentos · sobre negro 8,1:1 */
    --color-accent:             #e4b44a;   /* Oro Claro · destacados, links, foco, H2   · sobre negro 10,9:1 */
    --color-gold-line:          #b08d2e;   /* Oro Ocre · SOLO bordes y filetes          · sobre negro 6,7:1 (UI) */

    /* ───────────── COLOR · fondos ───────────── */
    --color-bg:                 #000000;   /* Negro Noche · fondo de página y héroes */
    --color-surface:            #1a1710;   /* Tierra Oscura · cards, paneles, footer */
    --color-surface-raised:     #221813;   /* Tierra Cálida · modales, menús, campos oscuros */
    --color-surface-special:    #2a1d14;   /* Adobe · secciones especiales (cita, CTA final, itinerante) */
    --color-surface-light:      #f3eee4;   /* Crema Hilado · "islas claras": formularios, textos legales, ficha imprimible */

    /* ───────────── COLOR · texto ───────────── */
    --color-text:               #f3eee4;   /* Crema · texto principal sobre oscuro      · sobre negro 18,2:1 */
    --color-text-secondary:     #c9c2b4;   /* Piedra · texto secundario                 · sobre negro 11,9:1 */
    --color-text-disabled:      #8f887c;   /* Ceniza · deshabilitado (no es contenido)  · sobre Tierra 5,1:1 */
    --color-text-on-light:      #1a1710;   /* texto sobre Crema                         · 15,5:1 */
    --color-link-on-light:      #9d0606;   /* links sobre Crema                         · 7,4:1 */
    --color-text-on-primary:    #ffffff;   /* texto sobre el botón rojo */

    /* ───────────── COLOR · líneas ───────────── */
    --color-border:             rgba(176, 141, 46, 0.35);  /* borde normal de cards (Oro Ocre al 35 %) */
    --color-border-strong:      #b08d2e;                   /* borde de campos y botones secundarios */
    --color-border-on-light:    #7a5f12;                   /* borde de campos sobre Crema (5,2:1) */
    --color-divider:            rgba(243, 238, 228, 0.14); /* separadores finos */

    /* ───────────── COLOR · estados ───────────── */
    --color-focus:              #e4b44a;   /* anillo de foco (3 px) — visible sobre negro, Tierra y rojo */
    --color-success:            #7bd88f;   /* sobre Tierra 10,3:1 */
    --color-warning:            #ffc107;   /* sobre Tierra 11,0:1 (el amarillo de las estrellas) */
    --color-error:              #ff6b6b;   /* sobre Tierra 6,4:1 */
    --color-info:               #6cc4d6;   /* Turquesa Titicaca · sobre Tierra 9,0:1 */
    --color-error-on-light:     #b3261e;   /* 5,7:1 sobre Crema */
    --color-success-on-light:   #1f6f3d;   /* 5,3:1 sobre Crema */
    --color-disabled-bg:        #2b2521;

    /* ───────────── TIPOGRAFÍA ───────────── */
    --font-display:  'Cinzel Decorative', 'Cinzel', Georgia, serif; /* H1 corto: casi un logotipo */
    --font-heading:  'Cinzel', Georgia, serif;                      /* H2, H3 y títulos largos: sin adornos */
    --font-body:     'Alegreya', Georgia, serif;                    /* lectura */
    --font-ui:       'Roboto', system-ui, sans-serif;               /* menú, botones, formularios, metadatos */

    /* Tamaños FLUIDOS: mínimo (celular 320–767) → máximo (escritorio ≥ 1200). Tablet queda en el medio. */
    --font-size-h1:        clamp(1.875rem, 1.35rem + 2.2vw, 3rem);       /* 30 → 48 px */
    --font-size-h2:        clamp(1.625rem, 1.3rem + 1.35vw, 2.125rem);   /* 26 → 34 px */
    --font-size-h3:        clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);     /* 20 → 24 px */
    --font-size-h4:        clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);    /* 18 → 20 px */
    --font-size-lead:      clamp(1.1875rem, 1.13rem + 0.3vw, 1.3125rem); /* 19 → 21 px */
    --font-size-body:      clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem); /* 17 → 18 px */
    --font-size-body-lg:   clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);    /* 18 → 20 px (sinopsis) */
    --font-size-secondary: 1rem;        /* 16 px */
    --font-size-small:     0.875rem;    /* 14 px · mínimo para texto de interfaz */
    --font-size-caption:   0.8125rem;   /* 13 px · solo metadatos no esenciales */
    --font-size-button:    0.9375rem;   /* 15 px */
    --font-size-nav:       1.0625rem;   /* 17 px (menú móvil 18 px) */
    --font-size-label:     0.9375rem;   /* 15 px */
    --font-size-input:     1rem;        /* 16 px: por debajo de esto iOS hace zoom al enfocar */

    --line-height-tight:   1.2;
    --line-height-heading: 1.3;
    --line-height-body:    1.7;
    --line-height-ui:      1.5;

    --letter-spacing-display: 0.02em;
    --letter-spacing-heading: 0.02em;
    --letter-spacing-button:  0.08em;
    --letter-spacing-eyebrow: 0.14em;

    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-semibold: 600;
    --font-weight-bold:    700;

    --measure: 68ch;   /* ancho máximo de un párrafo */

    /* ───────────── ESPACIADO (base de 4 px) ───────────── */
    --space-1: 0.25rem;  /*  4 */
    --space-2: 0.5rem;   /*  8 */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.5rem;   /* 24 */
    --space-6: 2rem;     /* 32 */
    --space-7: 3rem;     /* 48 */
    --space-8: 4rem;     /* 64 */
    --space-9: 6rem;     /* 96 */
    --spacing-xs:  var(--space-2);  /*  8 */
    --spacing-sm:  var(--space-4);  /* 16 */
    --spacing-md:  var(--space-5);  /* 24 */
    --spacing-lg:  var(--space-6);  /* 32 */
    --spacing-xl:  var(--space-7);  /* 48 */
    --spacing-2xl: var(--space-8);  /* 64 */
    --spacing-3xl: var(--space-9);  /* 96 */

    --section-padding-y: var(--space-7);   /* 48 celular */
    --gutter:            var(--space-4);   /* 16 celular */
    --page-margin:       1.25rem;          /* 20 celular */

    /* ───────────── FORMAS ───────────── */
    --radius-sm:   6px;     /* etiquetas, chips pequeños, miniaturas */
    --radius-md:   12px;    /* cards, campos, imágenes */
    --radius-lg:   20px;    /* modales, paneles grandes */
    --radius-pill: 999px;   /* botones, menú activo, riel de puntos */

    /* ───────────── SOMBRAS (poquitas: sobre fondo oscuro casi no se ven; la elevación la da el color) ───────────── */
    --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-md:    0 8px 20px rgba(0, 0, 0, 0.35);      /* la que más se usa hoy en el sitio */
    --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.65);
    --shadow-cta:   0 6px 16px rgba(157, 6, 6, 0.4);      /* solo hover del botón rojo */
    --glow-gold:    0 0 0 1px #b08d2e, 0 0 16px rgba(228, 180, 74, 0.35); /* solo elemento activo/seleccionado */

    /* ───────────── MOVIMIENTO ───────────── */
    --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 600ms;

    /* ───────────── TAMAÑOS DE INTERFAZ ───────────── */
    --touch-target: 48px;      /* alto mínimo de botones y campos (WCAG pide 24; 44–48 es lo cómodo con el dedo) */
    --header-height: 72px;     /* barra fija reducida en celular (hoy 100–118 px) */
    --container: 1200px;
    --container-wide: 1320px;

    /* ───────────── DEGRADADOS ───────────── */
    --gradient-primary: linear-gradient(145deg, #9d0606, #600000);
    --gradient-primary-hover: linear-gradient(145deg, #b50707, #600000);
    --overlay-image-bottom: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%);
    --overlay-hero-left:    linear-gradient(to right, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 80%);
}

/* Escalado por pantalla (mismo criterio en todo el sitio; cuatro cortes, no catorce) */
@media (min-width: 768px) {
    :root { --section-padding-y: var(--space-8); --gutter: var(--space-5); --page-margin: var(--space-6); --header-height: 84px; }
}
@media (min-width: 1200px) {
    :root { --section-padding-y: var(--space-9); --gutter: var(--space-5); --page-margin: var(--space-5); --header-height: 92px; }
}

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
    :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

/* ───────────── ALIAS: los nombres que YA existen en tipografia.css siguen funcionando ───────────── */
:root {
    --fuente-titulo: var(--font-display);
    --fuente-texto:  var(--font-body);
    --fuente-ui:     var(--font-ui);
    --c-negro:        var(--color-bg);
    --c-negro-suave:  var(--color-surface);
    --c-crema:        var(--color-text);
    --c-gris-suave:   var(--color-text-secondary);
    --c-dorado:       var(--color-secondary);
    --c-dorado-claro: var(--color-accent);
    --c-dorado-borde: var(--color-gold-line);
    --c-estrella:     var(--color-warning);
    --c-vino:         var(--color-primary);
    --c-vino-hover:   var(--color-primary-hover);
    --c-vino-oscuro:  var(--color-primary-deep);
}