/* =================================================================
   PERLA.VISION · Design System · Colors + Type
   "Cada Mirada Cuenta"
   Aligned with PERLA Sistema Cromático v3 (April 2026)
   ================================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Lust Display";
  src: url("./fonts/lust-display.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kepler Std";
  src: url("./fonts/KeplerStd-BoldScnDisp.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("./fonts/Canela-Regular-Trial.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("./fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eurostile Extended";
  src: url("./fonts/EurostileExtendedBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* CET display family — Archivo Black (loaded via Google Fonts in CET pieces).
   Token defined here for cross-reference; pieces that use CET typography
   include the Google Fonts <link> directly (Archivo Black + Archivo Narrow). */
/*
 NOTE on EQL display type: the system used "Canela" originally; production has
 moved to "Garamond" (free for personal/commercial use, broadly available) to
 avoid licensing conflicts. Stack falls through gracefully on any platform.
*/

/* =================================================================
   PARTE I · COLOR · INSTITUTIONAL PERLA
   Source: PERLA_sistema_cromatico_v3.md
   ================================================================= */
:root {
  /* --- Paleta base PERLA institucional --- */
  --perla-rosa:    #f9eee7;   /* Rosa perlado — base institucional */
  --perla-marron:  #8c644d;   /* Marrón cálido — color marca + PUENTE */
  --perla-gris:    #f2f2f2;   /* Gris claro — neutros */
  --perla-lavanda: #e5dfe8;   /* Lavanda perlado — complemento frío */
  --perla-negro:   #242326;   /* Negro profundo — texto / fondos */

  /* --- Rampa: Perla Cálida (rosa perlado → marrón) --- */
  --calida-50:  #fdf7f3;
  --calida-100: #f9eee7;
  --calida-200: #f0ddd2;
  --calida-300: #d4a88e;
  --calida-500: #8c644d;
  --calida-700: #6b4a38;
  --calida-900: #3a2518;

  /* --- Rampa: Perla Fría (lavanda) --- */
  --fria-50:  #f3f0f5;
  --fria-100: #e5dfe8;
  --fria-200: #cfc6d6;
  --fria-300: #a899b2;
  --fria-500: #7d6e8c;
  --fria-700: #5a4f66;
  --fria-900: #2a2533;

  /* --- Rampa: Perla Neutra --- */
  --neutra-50:  #f7f7f7;
  --neutra-100: #f2f2f2;
  --neutra-200: #dcdcdc;
  --neutra-400: #a8a8a8;
  --neutra-600: #6b6b6b;
  --neutra-800: #3d3d3f;
  --neutra-900: #242326;

  /* --- Fondos institucionales nombrados --- */
  --bg-perla-clasica: #fdf7f3;  /* Texto: #3a2518 / Acento: #8c644d */
  --bg-abisal:        #242326;  /* Texto: #d4a88e / Acento: #f0ddd2 */
  --bg-nacar-dorado:  #f0ddd2;  /* Texto: #3a2518 / Acento: #6b4a38 */
  --bg-lavanda-suave: #f3f0f5;  /* Texto: #2a2533 / Acento: #7d6e8c */

  /* =================================================================
     PARTE II · COLOR · EQL — ecosystem
     Equilibrium · sage-led, organic, reflective
     ================================================================= */
  --eql-verde-noche:    #2A3530;  /* fondo oscuro propio EQL */
  --eql-salvia-profundo:#4A6650;  /* bordes, sombras, inactivos */
  --eql-salvia:         #6B8F71;  /* COLOR MARCA — protagonista del logo */
  --eql-salvia-claro:   #9BB3A0;  /* texto sobre oscuros, highlights */
  --eql-marron:         #8C644D;  /* puente PERLA */
  --eql-nacar:          #D4B5A0;  /* acento, brillo focal */
  --eql-rosa:           #F9EEE7;  /* fondo claro principal */
  --eql-negro:          #242326;
  --eql-marron-profundo:#6B4A38;

  /* EQL fondos */
  --eql-bg-pergamino: #F9EEE7;
  --eql-bg-tierra:    #D4B5A0;
  --eql-bg-bosque:    #2A3530;
  --eql-bg-profundo:  #242326;

  /* =================================================================
     PARTE III · COLOR · LPF — ecosystem
     La Perla del Fútbol · nocturnal, contained dynamism
     ================================================================= */
  --lpf-noche:        #1a1528;   /* fondo principal */
  --lpf-uva-oscura:   #2d2240;   /* fondo secundario */
  --lpf-violeta:      #5c4a6e;   /* bordes / transiciones */
  --lpf-lavanda:      #c4b5d4;   /* texto principal LPF */
  --lpf-lavanda-claro:#dcd2e4;
  --lpf-cobre:        #c4793a;   /* acento cálido */
  --lpf-cobre-claro:  #d69258;
  --lpf-cobre-prof:   #8f5326;
  --lpf-oro:          #e8b860;   /* COLOR MARCA — el "LPF" */
  --lpf-oro-claro:    #f2cd85;
  --lpf-oro-prof:     #b88a42;

  /* LPF fondos */
  --lpf-bg-cancha:    #1a1528;
  --lpf-bg-uva:       #2d2240;

  /* =================================================================
     PARTE III.b · COLOR · CET — ecosystem
     CET · severo, mineral, "el silencio antes del ruido"
     ================================================================= */
  --cet-grafito:        #2C2F35;   /* fondo principal CET */
  --cet-grafito-medio:  #4A4E57;   /* superficies elevadas */
  --cet-humo:           #8C8D8F;   /* texto secundario / muted */
  --cet-blanco-roto:    #EDE8E1;   /* texto principal / fg */
  --cet-blanco-papel:   #F4EFE8;   /* fondo claro alternativo */
  --cet-ladrillo:       #A84B35;   /* COLOR MARCA — el acento ladrillo */
  --cet-ladrillo-deep:  #7E3725;   /* hover/pressed */
  --cet-perla-puente:   #8c644d;   /* puente PERLA (alias) */

  /* =================================================================
     PARTE III.c · COLOR · UPC — ecosystem
     ~~Un~~ poco coherentes · cálido, descontracturado, "luz de living"
     ================================================================= */
  --upc-noche-living:   #281A0F;   /* fondo oscuro propio UPC */
  --upc-tierra:         #4A2E1C;   /* superficies elevadas sobre oscuro */
  --upc-marron-puente:  #8C644D;   /* puente PERLA (alias) */
  --upc-terracota:      #B85C45;   /* acento — la imperfección como valor */
  --upc-ambar:          #D2761E;   /* COLOR MARCA — energía, humor sin artificios */
  --upc-trigo:          #D9B87A;   /* el "u" tachado, highlights cálidos */
  --upc-crema-rota:     #F0E2C8;   /* fondo claro — más amarillento que el rosa perlado */
  --upc-crema-suave:    #F7EEDA;   /* tinte aún más claro para superficies */
  --upc-negro-calido:   #242326;   /* texto principal compartido */

  /* =================================================================
     PARTE IV · COLOR PUENTE INSTITUCIONAL
     ================================================================= */
  --puente-marron: #8c644d;   /* the ONLY color shared across PERLA, EQL, LPF, CET, UPC */

  /* =================================================================
     LEGACY ALIASES (compat with kit's earlier draft)
     Map old token names → v3 canonical values.
     ================================================================= */
  --pearl-50:   var(--calida-50);
  --pearl-100:  var(--calida-100);
  --pearl-200:  var(--calida-200);
  --pearl-300:  var(--calida-300);
  --pearl-rose: var(--fria-100);
  --pearl-blush:var(--fria-200);

  --bronze-900: var(--calida-900);
  --bronze-800: #5E3D2E;
  --bronze-700: var(--calida-700);
  --bronze-600: var(--puente-marron);
  --bronze-500: #A07560;
  --bronze-400: var(--calida-300);
  --bronze-300: #CDB1A2;
  --bronze-200: var(--calida-200);
  --bronze-100: #F1E4DA;

  --ink-900: #1A191C;
  --ink-800: var(--perla-negro);
  --ink-700: var(--neutra-800);
  --ink-600: var(--neutra-600);
  --ink-500: #6B6772;
  --ink-400: var(--neutra-400);
  --ink-300: #B4AFB8;
  --ink-200: var(--neutra-200);
  --ink-100: var(--neutra-100);

  /* sub-brand legacy aliases */
  --eql-sage:       var(--eql-salvia);
  --eql-sage-dark:  var(--eql-salvia-profundo);
  --eql-shield:     var(--eql-nacar);
  --lpf-lilac:      var(--lpf-lavanda);
  --lpf-lilac-deep: var(--lpf-violeta);
  --lpf-gold:       var(--lpf-oro);
  --lpf-gold-deep:  var(--lpf-oro-prof);

  /* --- Semantic / status (sparingly used) --- */
  --signal-positive: #6B8F71;   /* aligned with EQL salvia */
  --signal-warning:  #c4793a;   /* aligned with LPF cobre */
  --signal-error:    #B05548;
  --signal-info:     var(--fria-500);

  /* =====================================================
     SEMANTIC TOKENS — Light theme (institutional default)
     Background: Perla Clásica (#fdf7f3)
     ===================================================== */
  --bg:           var(--bg-perla-clasica);
  --bg-elev-1:    #FFFFFF;
  --bg-elev-2:    var(--calida-100);
  --bg-inverse:   var(--perla-negro);

  --surface:        #FFFFFF;
  --surface-soft:   var(--calida-100);
  --surface-sunken: var(--calida-200);

  --fg:            var(--calida-900);
  --fg-1:          var(--calida-900);  /* primary text */
  --fg-2:          var(--calida-700);  /* secondary */
  --fg-3:          var(--neutra-600);  /* tertiary / muted */
  --fg-on-dark:    var(--perla-rosa);
  --fg-on-accent:  #FFFFFF;

  --accent:           var(--puente-marron);
  --accent-hover:     var(--calida-700);
  --accent-pressed:   var(--calida-900);
  --accent-soft:      var(--calida-200);
  --accent-on:        #FFFFFF;

  --border:        rgba(36, 35, 38, 0.12);
  --border-strong: rgba(36, 35, 38, 0.24);
  --border-accent: var(--calida-300);
  --hairline:      rgba(140, 100, 77, 0.30);

  --shadow-sm:  0 1px 2px rgba(36, 35, 38, 0.06),
                0 1px 1px rgba(36, 35, 38, 0.04);
  --shadow-md:  0 4px 12px -2px rgba(36, 35, 38, 0.10),
                0 2px 4px -1px rgba(36, 35, 38, 0.06);
  --shadow-lg:  0 16px 40px -8px rgba(36, 35, 38, 0.18),
                0 4px 12px -4px rgba(36, 35, 38, 0.08);
  --shadow-pearl: 0 6px 24px -4px rgba(229, 223, 232, 0.55),
                  0 2px 6px -2px rgba(140, 100, 77, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                  inset 0 -1px 0 rgba(36, 35, 38, 0.04);
}

/* =====================================================
   SEMANTIC TOKENS — Dark theme (Abisal — institutional dark)
   Background: #242326
   ===================================================== */
:root[data-theme="dark"],
.theme-dark {
  --bg:           var(--bg-abisal);
  --bg-elev-1:    #2C2A2F;
  --bg-elev-2:    #1A191C;
  --bg-inverse:   var(--perla-rosa);

  --surface:        #2C2A2F;
  --surface-soft:   #34323A;
  --surface-sunken: #1A191C;

  --fg:            var(--calida-200);
  --fg-1:          var(--calida-200);
  --fg-2:          var(--calida-300);
  --fg-3:          var(--neutra-400);
  --fg-on-dark:    var(--perla-rosa);
  --fg-on-accent:  #FFFFFF;

  --accent:        var(--calida-300);
  --accent-hover:  var(--calida-200);
  --accent-pressed:var(--perla-rosa);
  --accent-soft:   rgba(212, 168, 142, 0.18);
  --accent-on:     var(--calida-900);

  --border:        rgba(241, 228, 218, 0.12);
  --border-strong: rgba(241, 228, 218, 0.24);
  --border-accent: var(--calida-300);
  --hairline:      rgba(212, 168, 142, 0.36);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 4px 12px -2px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 16px 40px -8px rgba(0, 0, 0, 0.60);
  --shadow-pearl: 0 6px 24px -4px rgba(229, 223, 232, 0.20),
                  0 2px 6px -2px rgba(0, 0, 0, 0.40);
}

/* =================================================================
   TYPOGRAPHY (per Sistema v3, April 2026)
   ================================================================= */
:root {
  /* Lust Display — PERLA institutional only (logo, h1/h2 web, placas)
     Canela        — EQL display + cierre PERLA in programs
     Eurostile Ext.— LPF display only (substituted in this kit)
     Kepler Scn    — cross-system: subtitles, lower-third roles, eslogan
     Raleway       — cross-system: body web, captions, UI, overlays */

  --font-perla-display: "Lust Display", "Kepler Std", "Didot", "Bodoni 72", serif;
  --font-eql-display:   "EB Garamond", "Garamond", "Adobe Garamond Pro", "Cormorant Garamond", "Kepler Std", Georgia, "Times New Roman", serif;
  --font-lpf-display:   "Eurostile Extended", "Eurostile", "Bahnschrift",
                        "DIN Alternate", "Helvetica Neue", sans-serif;
  --font-cet-display:   "Archivo Black", "Archivo", "Bebas Neue", "Antonio",
                        "Oswald", "Helvetica Neue", sans-serif;
  --font-cet-subhead:   "Archivo Narrow", "Antonio", "Oswald", "Helvetica Neue", sans-serif;
  /* UPC display — Alfa Slab One (chunky serif, "tapa de libro / cuaderno usado").
     Loaded via Google Fonts in UPC pieces. Syne ExtraBold queda como alterno
     más geométrico, también vía Google Fonts. */
  --font-upc-display:   "Alfa Slab One", "Bookman", "Bookman Old Style",
                        "Roboto Slab", Georgia, serif;
  --font-upc-display-alt: "Syne", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-upc-subhead:   "Kepler Std", "Canela", Georgia, serif;
  --font-secondary:     "Kepler Std", "Canela", Georgia, serif;
  --font-body:          "Raleway", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Legacy aliases */
  --font-display: var(--font-perla-display);
  --font-serif:   var(--font-eql-display);
  --font-sans:    var(--font-body);

  /* --- Type scale (modular, ratio ~1.25) --- */
  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-5xl: 5.5rem;
  --text-6xl: 8rem;

  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.22em;

  --leading-tight:  1.05;
  --leading-snug:   1.20;
  --leading-normal: 1.45;
  --leading-relaxed:1.65;
}

/* --- Heading semantics --- */
.h-display, .h-hero {
  font-family: var(--font-perla-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-perla-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}
.body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}
.body-lg {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}
.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.micro {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-2xs);
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}
.quote, blockquote {
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-soft);
  padding: 0.12em 0.4em;
  border-radius: 4px;
}

/* --- Per-program display helpers --- */
.h-eql {
  font-family: var(--font-eql-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--eql-marron);
}
.h-eql em { font-style: italic; color: var(--eql-salvia); font-weight: 400; }

.h-lpf {
  font-family: var(--font-lpf-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--lpf-oro);
  font-stretch: expanded;
}

.h-cet {
  font-family: var(--font-cet-display);
  font-weight: 900;
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
  color: var(--cet-blanco-roto);
}
.h-cet em { color: var(--cet-ladrillo); font-style: normal; }

.h-upc {
  font-family: var(--font-upc-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--upc-crema-rota);
  position: relative;
}
.h-upc em {
  color: var(--upc-trigo);
  font-style: normal;
  position: relative;
  display: inline-block;
}
/* The signature "Un" struck-through gesture — used in titles and overlays.
   Apply class .upc-struck to any inline element to get the angled brick line. */
.upc-struck {
  position: relative;
  display: inline-block;
  color: var(--upc-trigo);
}
.upc-struck::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: 55%;
  height: 0.16em;
  background: var(--upc-ambar);
  transform: rotate(-4deg);
  transform-origin: center;
  border-radius: 1px;
  box-shadow:
    0 0.5px 0 rgba(204, 136, 48, 0.10),
    0 1.5px 0 rgba(204, 136, 48, 0.05);
}

/* =================================================================
   SPACING / RADII / MOTION
   ================================================================= */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:       cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
  --duration-pearl: 900ms;
}

/* =================================================================
   BASELINE
   ================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--calida-200); color: var(--calida-900); }