/* ============================================================
   Pronti - tokens de marca
   Generado por kit/_work/build_tokens.py - no editar a mano.
   Fuente: BrandBook_ProntiUpdated.pdf p.21-22
   ============================================================ */

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/AktivGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/AktivGrotesk-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/AktivGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/AktivGrotesk-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/AktivGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/AktivGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/AktivGrotesk-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/AktivGrotesk-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- paleta oficial (BrandBook p.21) --- */
  --pr-verde: #07d6a4;
  --pr-negro: #201e1f;
  --pr-naranja: #fca22b;
  --pr-magenta: #ff0063;
  --pr-morado: #685bc7;
  --pr-blanco: #ffffff;

  /* --- escalas derivadas --- */
  --pr-verde-50: #e6fbf6;
  --pr-verde-100: #c3f5e9;
  --pr-verde-200: #92edd7;
  --pr-verde-300: #60e5c5;
  --pr-verde-400: #34ddb4;
  --pr-verde-500: #07d6a4;
  --pr-verde-600: #08b88d;
  --pr-verde-700: #099573;
  --pr-verde-800: #0a7158;
  --pr-verde-900: #0b4d3d;
  --pr-negro-50: #e9e8e9;
  --pr-negro-100: #c9c9c9;
  --pr-negro-200: #9d9c9c;
  --pr-negro-300: #706f70;
  --pr-negro-400: #484647;
  --pr-negro-500: #201e1f;
  --pr-negro-600: #1d1b1c;
  --pr-negro-700: #1a1819;
  --pr-negro-800: #161516;
  --pr-negro-900: #131212;
  --pr-naranja-50: #fff6ea;
  --pr-naranja-100: #fee9cc;
  --pr-naranja-200: #fed6a2;
  --pr-naranja-300: #fdc377;
  --pr-naranja-400: #fdb351;
  --pr-naranja-500: #fca22b;
  --pr-naranja-600: #d88c26;
  --pr-naranja-700: #b07221;
  --pr-naranja-800: #84571c;
  --pr-naranja-900: #593c16;
  --pr-magenta-50: #ffe6ef;
  --pr-magenta-100: #ffc2da;
  --pr-magenta-200: #ff8fba;
  --pr-magenta-300: #ff5c9b;
  --pr-magenta-400: #ff2e7f;
  --pr-magenta-500: #ff0063;
  --pr-magenta-600: #db0256;
  --pr-magenta-700: #b20447;
  --pr-magenta-800: #860638;
  --pr-magenta-900: #5a0828;
  --pr-morado-50: #f0eff9;
  --pr-morado-100: #dbd8f2;
  --pr-morado-200: #bdb7e6;
  --pr-morado-300: #9e96db;
  --pr-morado-400: #8379d1;
  --pr-morado-500: #685bc7;
  --pr-morado-600: #5a4fab;
  --pr-morado-700: #4b428b;
  --pr-morado-800: #3a346a;
  --pr-morado-900: #2a2548;

  --pr-neutro-50: #f7f7f7;
  --pr-neutro-100: #ededed;
  --pr-neutro-200: #dcdbdc;
  --pr-neutro-300: #bebdbe;
  --pr-neutro-400: #8e8d8e;
  --pr-neutro-500: #6b6a6b;
  --pr-neutro-600: #4f4e4f;
  --pr-neutro-700: #3a393a;
  --pr-neutro-800: #2b2a2b;
  --pr-neutro-900: #201e1f;
  --pr-neutro-950: #141314;

  /* --- tipografia --- */
  --pr-font: 'Aktiv Grotesk', ui-sans-serif, system-ui, -apple-system,
             'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pr-peso-light: 300;
  --pr-peso-normal: 400;
  --pr-peso-medium: 500;
  --pr-peso-bold: 700;
  --pr-peso-black: 900;

  /* escala tipografica 1.250 (major third), base 16px */
  --pr-texto-xs:   0.64rem;
  --pr-texto-sm:   0.8rem;
  --pr-texto-base: 1rem;
  --pr-texto-lg:   1.25rem;
  --pr-texto-xl:   1.563rem;
  --pr-texto-2xl:  1.953rem;
  --pr-texto-3xl:  2.441rem;
  --pr-texto-4xl:  3.052rem;
  --pr-texto-5xl:  3.815rem;

  /* --- radios: el isotipo es un cuadrado de esquinas muy suaves --- */
  --pr-radio-sm: 6px;
  --pr-radio-md: 12px;
  --pr-radio-lg: 20px;
  --pr-radio-xl: 32px;
  --pr-radio-full: 999px;

  /* --- espaciado (multiplos de 4) --- */
  --pr-esp-1: 4px;  --pr-esp-2: 8px;  --pr-esp-3: 12px; --pr-esp-4: 16px;
  --pr-esp-5: 24px; --pr-esp-6: 32px; --pr-esp-7: 48px; --pr-esp-8: 64px;
  --pr-esp-9: 96px; --pr-esp-10: 128px;

  /* --- sombras --- */
  --pr-sombra-sm: 0 1px 2px rgba(32,30,31,.08);
  --pr-sombra-md: 0 4px 12px rgba(32,30,31,.10);
  --pr-sombra-lg: 0 12px 32px rgba(32,30,31,.14);
}

/* ============================================================
   ROLES SEMANTICOS  -  usar estos, no los colores crudos
   ------------------------------------------------------------
   OJO: verde-500 (1.88:1) y naranja-500 (2.03:1) NO alcanzan
   contraste para texto sobre blanco. Como FONDO son perfectos,
   pero la tinta encima tiene que ser negra, no blanca.
   Para texto de color sobre blanco usar los tonos -800.
   ============================================================ */
:root {
  --pr-fondo:          var(--pr-blanco);
  --pr-fondo-alt:      var(--pr-neutro-50);
  --pr-superficie:     var(--pr-blanco);
  --pr-borde:          var(--pr-neutro-200);
  --pr-borde-fuerte:   var(--pr-neutro-300);

  --pr-tinta:          var(--pr-negro);          /* 16.58:1 */
  --pr-tinta-suave:    var(--pr-neutro-600);     /*  8.03:1 */
  --pr-tinta-tenue:    var(--pr-neutro-500);     /*  5.55:1 */

  --pr-primario:       var(--pr-verde);          /* fondos y rellenos */
  --pr-primario-hover: var(--pr-verde-600);
  --pr-primario-texto: var(--pr-verde-800);      /* verde legible sobre blanco */
  --pr-sobre-primario: var(--pr-negro);          /* tinta encima del verde: 8.81:1 */

  --pr-acento:         var(--pr-naranja);
  --pr-acento-texto:   var(--pr-naranja-800);
  --pr-sobre-acento:   var(--pr-negro);          /* 8.16:1 */

  --pr-alerta:         var(--pr-magenta-700);    /* el 500 no da con blanco */
  --pr-alerta-texto:   var(--pr-magenta-800);
  --pr-sobre-alerta:   var(--pr-blanco);

  --pr-info:           var(--pr-morado);
  --pr-info-texto:     var(--pr-morado-700);
  --pr-sobre-info:     var(--pr-blanco);         /* 5.37:1 */
}

/* modo oscuro: el brandbook lo respalda, el negro es color de marca */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --pr-fondo:        var(--pr-neutro-950);
    --pr-fondo-alt:    var(--pr-negro);
    --pr-superficie:   var(--pr-neutro-800);
    --pr-borde:        var(--pr-neutro-700);
    --pr-borde-fuerte: var(--pr-neutro-600);

    --pr-tinta:        var(--pr-blanco);
    --pr-tinta-suave:  var(--pr-neutro-300);
    --pr-tinta-tenue:  var(--pr-neutro-400);

    --pr-primario-texto: var(--pr-verde-400);
    --pr-acento-texto:   var(--pr-naranja-300);
    --pr-alerta:         var(--pr-magenta);
    --pr-alerta-texto:   var(--pr-magenta-300);
    --pr-info-texto:     var(--pr-morado-300);
  }
}
:root[data-tema="oscuro"] {
  --pr-fondo:        var(--pr-neutro-950);
  --pr-fondo-alt:    var(--pr-negro);
  --pr-superficie:   var(--pr-neutro-800);
  --pr-borde:        var(--pr-neutro-700);
  --pr-borde-fuerte: var(--pr-neutro-600);
  --pr-tinta:        var(--pr-blanco);
  --pr-tinta-suave:  var(--pr-neutro-300);
  --pr-tinta-tenue:  var(--pr-neutro-400);
  --pr-primario-texto: var(--pr-verde-400);
  --pr-acento-texto:   var(--pr-naranja-300);
  --pr-alerta:         var(--pr-magenta);
  --pr-alerta-texto:   var(--pr-magenta-300);
  --pr-info-texto:     var(--pr-morado-300);
}