/*
 * Transy — tokens de diseño.
 *
 * Paleta "Sevilla de día": cal (paredes encaladas), tinta (azul muy oscuro de imprenta),
 * azulejo (azul cobalto de la cerámica trianera) para la acción y albero (el ocre del
 * Real de la Feria) para el progreso y lo que se está moviendo.
 *
 * Regla: los componentes NUNCA usan colores en bruto, solo estas variables.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Color */
  --c-cal: #F6F7FB;
  --c-paper: #FFFFFF;
  --c-ink: #141B34;
  --c-ink-soft: #4C5573;
  --c-rule: #D9DDEA;
  --c-rule-strong: #B8BED3;
  --c-azulejo: #2443B6;
  --c-azulejo-strong: #1A3290;
  --c-azulejo-wash: #E8ECFA;
  --c-on-azulejo: #FFFFFF;
  --c-albero: #E2A93B;
  --c-albero-wash: #FBF1DC;
  --c-ok: #1E7A55;
  --c-ok-wash: #E3F2EB;
  --c-error: #B4232A;
  --c-error-wash: #FBE7E8;
  --c-focus: #2443B6;
  --c-overlay: rgb(20 27 52 / 0.45);
  /* Distintivo «Pro»: azul corporativo y texto blanco en los dos temas (no se redefine en oscuro). */
  --c-pro: #2443B6;
  --c-on-pro: #FFFFFF;
  /* Azul noche del escenario: también la barra superior de la cuenta y el backoffice,
     para que la marca (logo en blanco) sea la misma en toda la web. Igual en los dos temas. */
  --c-night: #0B1128;
  --c-night-ink: #FFFFFF;
  --c-night-ink-soft: rgb(222 228 255 / 0.72);
  --c-night-wash: rgb(255 255 255 / 0.09);
  --c-night-rule: rgb(255 255 255 / 0.1);

  /* Tipografía: una sola familia (Archivo) jugando con su eje de anchura. */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --stretch-condensed: 80%;
  --stretch-normal: 100%;
  --stretch-wide: 118%;
  --stretch-expanded: 125%;

  /* Escala modular 1,25 sobre 16 px */
  --t-xs: 0.8rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5625rem;
  --t-2xl: 1.953rem;
  --t-3xl: 2.441rem;
  --t-display: clamp(2.6rem, 2rem + 4.2vw, 5rem);
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.55;

  /* Espaciado (múltiplos de 4 px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;

  --shadow-sheet: 0 1px 0 var(--c-rule), 0 22px 48px -28px rgb(20 27 52 / 0.38);
  --shadow-pop: 0 12px 32px -12px rgb(20 27 52 / 0.35);

  --measure: 68ch;
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --c-cal: #0E1324;
    --c-paper: #161D33;
    --c-ink: #E7EAF4;
    --c-ink-soft: #A3AAC4;
    --c-rule: #2A3352;
    --c-rule-strong: #3B4568;
    --c-azulejo: #7E95FF;
    --c-azulejo-strong: #A3B3FF;
    --c-azulejo-wash: #1E2850;
    --c-on-azulejo: #0E1324;
    --c-albero: #F0BE5A;
    --c-albero-wash: #3A2E14;
    --c-ok: #5CC497;
    --c-ok-wash: #12372A;
    --c-error: #FF8A8F;
    --c-error-wash: #3D1418;
    --c-focus: #A3B3FF;
    --c-overlay: rgb(0 0 0 / 0.6);
    --shadow-sheet: 0 1px 0 var(--c-rule), 0 22px 48px -28px rgb(0 0 0 / 0.8);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --c-cal: #0E1324;
  --c-paper: #161D33;
  --c-ink: #E7EAF4;
  --c-ink-soft: #A3AAC4;
  --c-rule: #2A3352;
  --c-rule-strong: #3B4568;
  --c-azulejo: #7E95FF;
  --c-azulejo-strong: #A3B3FF;
  --c-azulejo-wash: #1E2850;
  --c-on-azulejo: #0E1324;
  --c-albero: #F0BE5A;
  --c-albero-wash: #3A2E14;
  --c-ok: #5CC497;
  --c-ok-wash: #12372A;
  --c-error: #FF8A8F;
  --c-error-wash: #3D1418;
  --c-focus: #A3B3FF;
  --c-overlay: rgb(0 0 0 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
}

/* Páginas de cuenta, precios y backoffice (body.app): tarjetas y controles más sobrios
   que en el escenario de la portada. Solo cambian tokens: los componentes son los mismos. */
.app {
  --radius-l: 12px;
  --radius-m: 8px;
  --shadow-sheet: 0 1px 2px rgb(20 27 52 / 0.06), 0 1px 1px rgb(20 27 52 / 0.03);
}