/* Gerado de estilos/_fuentes.scss + estilos/_tokens.scss — não editar aqui. */
/* Familias del manual de marca (sistema-diseno.md §3). Solo existen los pesos
   que hay en archivo: sin negrita sintética en Timezone ni en Styrene. */

@font-face {
  font-family: 'Timezone';
  src: url('./timezone-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Styrene';
  src: url('./styrene-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Styrene';
  src: url('./styrene-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Loos Normal';
  src: url('./loos-normal-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* La negrita solo vino en TTF. */
@font-face {
  font-family: 'Loos Normal';
  src: url('./loos-normal-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   Tokens del sistema de diseño Avla (ver sistema-diseno.md en esta carpeta).
   ÚNICO lugar con colores, tipografía, espaciado y formas: los componentes solo
   consumen estas variables. Los pares texto/fondo se miden en
   shared/contrast.spec.ts y en el axe del E2E (WCAG 2.1 AA).
   ============================================================================= */

:root {
  /* ---- Paleta de marca (manual Avla, §1) ---- */
  --avla-blue: #0071ce;
  --avla-sky: #9fd7e5;
  --avla-yellow: #fdda00;
  --avla-green: #00ce7e;
  --avla-offwhite: #e0dbd7;
  --avla-beige: #f4f3ec;

  /* ---- Tipografía (§3) ---- */
  --font-display: 'Timezone', system-ui, 'Segoe UI', sans-serif;
  --font-caption: 'Styrene', system-ui, 'Segoe UI', sans-serif;
  --font-body: 'Loos Normal', system-ui, 'Segoe UI', sans-serif;

  --fs-screen-title: 24px;
  --fs-section-title: 18px;
  --fs-subtitle: 15px;
  --fs-label: 13px;
  --fs-body: 14px;
  --fs-aux: 12px;

  --lh-body: 1.5;
  --lh-tight: 1.25;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- Espaciado: escala de 4 px (§4) ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* ---- Formas (§5) ---- */
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-dialog: 12px;
  --border-width: 1px;
  --focus-width: 2px;

  /* ---- Medidas de componentes y layout ---- */
  --size-control: 36px;
  --size-avatar: 32px;
  --size-tile: 48px;
  --size-state-icon: 32px;
  --layout-max: 1120px;
  --layout-auth: 480px;

  /* Texto sobre Sky Blue: es un fondo claro en los dos temas. */
  --on-info: #1f1f1f;

  /* Pantalla de acceso: página en Avla Blue y wordmark en blanco (uso aprobado
     del brand guide: blanco sobre Avla Blue). Igual en los dos temas. */
  --auth-bg: var(--avla-blue);
  --on-auth: #ffffff;
  /* La tarjeta de acceso es un diálogo: única sombra permitida, y sutil (§5). */
  --shadow-dialog: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* ---- Tema claro: colores exactos del manual (§1 y §2) ---- */
:root,
[data-theme='light'] {
  --bg: var(--avla-beige);
  --surface: #ffffff;
  --surface-2: var(--avla-beige);
  --text: #1f1f1f;
  --text-muted: #6b7280;
  /* DERIVADO: #6b7280 sobre el beige da 4,34:1 (< 4,5 WCAG AA). Solo para texto
     secundario apoyado directamente en el fondo de página. */
  --text-muted-page: #636a77;
  --border: var(--avla-offwhite);

  --brand: var(--avla-blue);
  --brand-strong: #005ca8;
  --on-brand: #ffffff;
  /* DERIVADO: Sky Blue al 15 % sobre blanco. Fondo suave que conserva 4,6:1
     con el Avla Blue encima (el Sky Blue pleno da 3,1:1). */
  --brand-soft: #f1f9fb;

  --info: var(--avla-sky);
  --info-bg: #f1f9fb;
  --success: var(--avla-green);
  --success-bg: #e0f9ef;
  /* Sun Yellow es acento (borde), nunca color de texto. */
  --warn: var(--avla-yellow);
  --warn-bg: #fff9d9;
  /* PROPUESTO por el sistema (no está en la paleta): solo errores y acciones destructivas. */
  --danger: #c0392b;
  --danger-bg: #faebea;

  --avla-logo: var(--avla-blue);
}

/* ---- Tema oscuro: EXTENSIÓN no definida por el manual ----
   Derivada de la paleta: neutros a partir del texto principal #1f1f1f, texto en
   Beige/Off White, y Sky Blue como acento (el Avla Blue sobre fondo oscuro no
   llega a 3:1). Pendiente de validar con el área de marca. */
[data-theme='dark'] {
  --bg: #1f1f1f;
  --surface: #2a2a2a;
  --surface-2: #333333;
  --text: var(--avla-beige);
  --text-muted: #afaaa5;
  --text-muted-page: #afaaa5;
  --border: #3d3a37;

  --brand: var(--avla-sky);
  --brand-strong: #c5e7f0;
  --on-brand: #1f1f1f;
  --brand-soft: #1e3342;

  --info: var(--avla-sky);
  --info-bg: #1e3342;
  --success: var(--avla-green);
  --success-bg: #0f3325;
  --warn: var(--avla-yellow);
  --warn-bg: #332c0a;
  --danger: #f08a7e;
  --danger-bg: #3a1f1c;

  /* Brand guide: sobre fondo oscuro el wordmark va en blanco (uso restringido). */
  --avla-logo: #ffffff;
}

/* =============================================================================
   Extensión para esta aplicación (Spread Financeiro). DERIVADOS de la paleta,
   no son colores de marca. Existen porque Sun Yellow y Emerald Green no llegan
   a 4,5:1 como texto sobre fondos claros (1,4:1 y 1,9:1), y porque los campos
   necesitan un borde de 3:1 (WCAG 2.1 §1.4.11) que el Off White no da.
   Medidos en shared/contrast.spec.ts.
   ============================================================================= */
:root,
[data-theme='light'] {
  /* Borde de componente (campos, botón secundario): Off White oscurecido.
     3,56:1 sobre el beige · 3,9:1 sobre blanco. */
  --border-strong: #857f79;
  /* Tinta del aviso: Sun Yellow oscurecido. 5,72:1 sobre --warn-bg · 6,06:1 sobre blanco. */
  --warn-ink: #7a5f00;
  /* Tinta de éxito: Emerald Green oscurecido. 5,55:1 sobre --success-bg · 6,15:1 sobre blanco. */
  --success-ink: #00704a;
  /* Texto sobre --danger: 5,44:1. */
  --on-danger: #ffffff;
}

[data-theme='dark'] {
  /* 3,42:1 sobre --surface-2 · 3,88:1 sobre --surface. */
  --border-strong: #8a847e;
  /* En oscuro los colores de marca ya contrastan: 10,1:1 y 6,66:1 sobre su fondo. */
  --warn-ink: var(--avla-yellow);
  --success-ink: var(--avla-green);
  /* 6,78:1 sobre --danger. */
  --on-danger: #1f1f1f;
}