/* ============================================================
   TOKENS — sistema de diseño propio del módulo PayJoy
   ------------------------------------------------------------
   Se carga ANTES de payjoy.css (ver Pages/Index.cshtml). payjoy.css
   redefine --accent, --ink, --good, --r-s, --font-ui, etc. como
   ALIAS de las variables de acá, así ~2000 líneas de CSS existente
   siguen funcionando sin tocarlas una por una.

   Reemplaza los "BMW Design Tokens" que vivían en payjoy.css:1-77
   (extraídos de bmw.com, ver bmw-DESIGN.md) por una paleta propia.
   El azul de marca (#1c69d4) se mantiene — es el que ya conocen
   los usuarios — pero ya no arrastra nomenclatura ni colores de BMW.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root{
  color-scheme: light;

  /* ── Marca ──────────────────────────────────────────────── */
  --primary-50:  #EDF3FC;
  --primary-100: #D6E4F8;
  --primary-500: #3A7FDD;
  --primary-600: #1C69D4;
  --primary-700: #0653B6;

  /* ── Neutros ────────────────────────────────────────────── */
  --bg:             #F5F6F8;
  --surface:        #FFFFFF;
  --surface-muted:  #F1F3F6;
  --border:         #E4E7EC;
  --border-strong:  #CBD2DC;
  --text:           #1A1D23;
  --text-secondary: #475467;
  --text-tertiary:  #5C6779;   /* ≥4.5:1 no solo sobre --surface sino también sobre
                                   --surface-muted (más oscuro) -- #667085 daba 4.47:1
                                   ahí, por debajo del mínimo (auditoría axe-core) */

  /* ── Semánticos ─────────────────────────────────────────────
     *-fill: puntos, fondos sólidos, barras. *-text: texto sobre
     --surface/--bg (los *-fill NO tienen contraste AA como texto,
     ver auditoría G16 — --warning-fill sobre blanco da ~2.3:1). */
  --success-fill: #22C55E;  --success-text: #15803D;  --success-bg: #ECFDF3;
  --warning-fill: #F59E0B;  --warning-text: #B45309;  --warning-bg: #FFF7ED;
  --danger-fill:  #DC2626;  --danger-text:  #B91C1C;  --danger-bg:  #FEF2F2;
  --info-text:    var(--primary-700);                  --info-bg:    var(--primary-50);

  /* ── Estados de carga (fase 4) ──────────────────────────── */
  --skeleton-base:      #E9ECF1;
  --skeleton-highlight: rgba(255,255,255,.7);
  --scrim:              rgba(16,24,40,.45);

  /* ── Radios — reemplaza --r-s/m/l/xl (payjoy.css) ───────── */
  --radius-sm:   8px;   /* inputs, badges, imágenes internas */
  --radius-md:   12px;  /* tarjetas, botones */
  --radius-lg:   20px;  /* borde superior de hojas */
  --radius-full: 999px; /* chips, avatares, pills */

  /* ── Espaciado — retícula de 4px. Ya estaba definida en
     payjoy.css (--sp-1..7) sin ningún uso real; se trae acá con
     los mismos valores (no cambian) para que quede en un solo
     lugar junto al resto del sistema. ────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ── Elevación — mismos 3 niveles que usaba el módulo, valores
     ajustados a un neutro con algo de azul (#101828) en vez del
     negro puro que traía BMW. Nivel 0 (tarjetas en reposo) es
     SIN sombra, solo borde — no hay token para eso a propósito. */
  --shadow-1: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --shadow-2: 0 4px 6px -1px rgba(16,24,40,.10), 0 2px 4px -1px rgba(16,24,40,.06);
  --shadow-3: 0 10px 15px -3px rgba(16,24,40,.10), 0 4px 6px -2px rgba(16,24,40,.05);

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;

  /* Escala (tamaño/interlineado/peso). Se aplica a los componentes
     base en la fase 3 — definida acá para no repetir números sueltos
     cuando llegue el momento de usarla. */
  --fs-display:      32px; --lh-display:      38px; --fw-display:      700;
  --fs-title-lg:     22px; --lh-title-lg:     28px; --fw-title-lg:     700;
  --fs-title:        18px; --lh-title:        24px; --fw-title:        600;
  --fs-body-strong:  15px; --lh-body-strong:  20px; --fw-body-strong:  600;
  --fs-body:         15px; --lh-body:         22px; --fw-body:         400;
  --fs-caption:      13px; --lh-caption:      18px; --fw-caption:      500;
  --fs-micro:        12px; --lh-micro:        16px; --fw-micro:        600;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --primary-50:  #13233F;
    --primary-100: #1B3358;
    --primary-500: #5A95EE;
    --primary-600: #4D8BEB;
    --primary-700: #7AA9F2;

    --bg:             #0C111B;
    --surface:        #131A27;
    --surface-muted:  #1A2332;
    --border:         #253043;
    --border-strong:  #34425A;
    --text:           #E8ECF2;
    --text-secondary: #A9B4C4;
    --text-tertiary:  #8894A7;

    --success-fill: #22C55E; --success-text: #4ADE80; --success-bg: #0F2A1B;
    --warning-fill: #F59E0B; --warning-text: #FBBF24; --warning-bg: #2E2110;
    --danger-fill:  #DC2626; --danger-text:  #F87171; --danger-bg:  #331616;
    --info-text:    var(--primary-500); --info-bg: var(--primary-50);

    --skeleton-base:      #1B2536;
    --skeleton-highlight: rgba(255,255,255,.06);
    --scrim:              rgba(0,0,0,.6);

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 8px 24px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
    --shadow-3: 0 24px 60px -18px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;

  --primary-50:  #13233F;
  --primary-100: #1B3358;
  --primary-500: #5A95EE;
  --primary-600: #4D8BEB;
  --primary-700: #7AA9F2;

  --bg:             #0C111B;
  --surface:        #131A27;
  --surface-muted:  #1A2332;
  --border:         #253043;
  --border-strong:  #34425A;
  --text:           #E8ECF2;
  --text-secondary: #A9B4C4;
  --text-tertiary:  #8894A7;

  --success-fill: #22C55E; --success-text: #4ADE80; --success-bg: #0F2A1B;
  --warning-fill: #F59E0B; --warning-text: #FBBF24; --warning-bg: #2E2110;
  --danger-fill:  #DC2626; --danger-text:  #F87171; --danger-bg:  #331616;
  --info-text:    var(--primary-500); --info-bg: var(--primary-50);

  --skeleton-base:      #1B2536;
  --skeleton-highlight: rgba(255,255,255,.06);
  --scrim:              rgba(0,0,0,.6);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --shadow-3: 0 24px 60px -18px rgba(0,0,0,.75);
}

/* Único juego de breakpoints de ancho para todo el módulo: 480 (teléfono
   angosto) · 720 (teléfono) · 900 (donde el riel pasa a hamburguesa/tabbar).
   Documentado acá porque las variables CSS no funcionan dentro de un
   @media — no se puede escribir "@media (max-width: var(--bp-tablet))". */