$size-base: 16;
/* FONT STYLES */

$font-size: $size-base + px;
$font-size-mobile: 14px;

$font-weight-extra-light: 200;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;
$font-weight-bold: 700;
$font-weight-extra-bold: 800;
$font-weight-black: 900;

$font-size-display-xlarge: 70;
$font-size-display-xlarge-responsive: 48;
$font-size-display-large: 48;
$font-size-display-large-responsive: 40;
$font-size-display-medium: 40;
$font-size-display-medium-responsive: 32;
$font-size-display-small: 32;
$font-size-display-small-responsive: 24;
$font-size-title-large: 24;
$font-size-title-large-responsive: 18;
$font-size-title-medium: 18;
$font-size-title-medium-responsive: 16;
$font-size-title-small: 16;
$font-size-title-small-responsive: 14;
$font-size-body-xlarge: 24;
$font-size-body-xlarge-responsive: 18;
$font-size-body-large: 18;
$font-size-body-large-responsive: 16;
$font-size-body-medium: 16;
$font-size-body-medium-responsive: 14;
$font-size-body-small: 14;
$font-size-body-small-responsive: 12;

$line-height-display-xlarge: 66;
$line-height-display-xlarge-responsive: 56;
$line-height-display-large: 56;
$line-height-display-large-responsive: 48;
$line-height-display-medium: 48;
$line-height-display-medium-responsive: 40;
$line-height-display-small: 40;
$line-height-display-small-responsive: 32;
$line-height-title-large: 32;
$line-height-title-large-responsive: 24;
$line-height-title-medium: 24;
$line-height-title-medium-responsive: 24;
$line-height-title-small: 24;
$line-height-title-small-responsive: 24;
$line-height-body-xlarge: 32;
$line-height-body-xlarge-responsive: 24;
$line-height-body-large: 24;
$line-height-body-large-responsive: 24;
$line-height-body-medium: 24;
$line-height-body-medium-responsive: 24;
$line-height-body-small: 20;

/* SIZES */

$icon-size-small: 16;
$icon-size-medium: 24;
$icon-size-large: 32;
$icon-size-xlarge: 40;

$container-max-xlarge: 1100;
$container-max-large: 880;
$container-max-medium: 720;
$container-max-small: 540;

$border-radius-small: 8;
$border-radius: 12;
$border-radius-large: 24;

/* COLORS */
$color-classic-white: #ffffff;
$color-alternative-white: #f5f7fa;
$color-default-hr: #878ca0;
$color-default-border: #dde3ed;
$color-default-shadow: #121954;
$color-default-placeholder: #afbacc;

:root {
  /* CONTAINER WIDTHS — design tokens consumibles desde apps */
  --val-container-sm: 540px;
  --val-container-md: 720px;
  --val-container-lg: 880px;
  --val-container-xl: 1100px;
  // Ancho del contenido cuando el rail de escritorio está retraído. Es el
  // segundo máximo: al colapsar el menú se liberan ~296px y el contenido toma
  // parte de ellos, sin volverse fluido.
  --val-container-xl-wide: 1280px;
  // Mismo mecanismo para `md` (formularios/paneles tipo Settings: preferencias,
  // seguridad, cuenta, organización). Decisión explícita del CTO
  // (2026-08-24): estas vistas SÍ deben crecer al colapsar el rail, aunque el
  // criterio "md no crece" (líneas de lectura) siga aplicando a texto largo.
  --val-container-md-wide: 900px;
  // Espacio lateral reservado para elementos fuera del contenido (ads, paneles
  // auxiliares). Vale 0 salvo que una ruta lo declare: el contenido se encoge
  // solo, en cualquiera de los dos estados y en cualquier viewport, sin que la
  // lib tenga que adivinar cuánto mide el elemento.
  --val-container-aside: 0px;
  --val-container-padding: 16px;

  /* RADIO DE BORDE — nueva personalidad de marca (2026-08-28, pedido del CTO):
   * bordes más redondos, más simpleza. Escala pública consumible desde apps
   * y desde cualquier componente nuevo — usar var(--val-radius-*, fallback)
   * en vez de un número suelto. Reemplaza gradualmente a $border-radius-*
   * (SCSS, solo compile-time, casi sin uso real hoy — ver docs/frontend/
   * design-personality.md). No se migró aún ningún componente existente a
   * propósito: este commit solo establece el token.
   */
  --val-radius-xs: 10px;
  --val-radius-sm: 16px;
  --val-radius-md: 20px;
  --val-radius-lg: 28px;
  --val-radius-xl: 36px;
  --val-radius-full: 999px;

  --ion-color-primary: #7026df;
  --ion-color-primary-rgb: 112, 38, 223;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #6321c4;
  --ion-color-primary-tint: #7e3ce2;

  --ion-color-secondary: #e2ccff;
  --ion-color-secondary-rgb: 226, 204, 255;
  --ion-color-secondary-contrast: #000000;
  --ion-color-secondary-contrast-rgb: 0, 0, 0;
  --ion-color-secondary-shade: #c7b4e0;
  --ion-color-secondary-tint: #e5d1ff;

  --ion-color-texti: #354c69;
  --ion-color-texti-rgb: 53, 76, 105;
  --ion-color-texti-contrast: #ffffff;
  --ion-color-texti-contrast-rgb: 255, 255, 255;
  --ion-color-texti-shade: #2f435c;
  --ion-color-texti-tint: #495e78;

  --ion-color-darki: #090f1b;
  --ion-color-darki-rgb: 9, 15, 27;
  --ion-color-darki-contrast: #ffffff;
  --ion-color-darki-contrast-rgb: 255, 255, 255;
  --ion-color-darki-shade: #080d18;
  --ion-color-darki-tint: #222732;

  --ion-color-medium: #9e9e9e;
  --ion-color-medium-rgb: 158, 158, 158;
  --ion-color-medium-contrast: #000000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #8b8b8b;
  --ion-color-medium-tint: #a8a8a8;

  /* warning — default de la lib, no el naranja de Ionic sin marcar. Amarillo
     con contraste negro: se lee como aviso sin leer como error (ese rol es de
     danger) y sin desentonar con el resto de las apps del factory, que no
     personalizan warning y hasta ahora heredaban el naranja crudo de Ionic. */
  --ion-color-warning: #ffde38;
  --ion-color-warning-rgb: 255, 222, 56;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0c331;
  --ion-color-warning-tint: #ffe14c;

  --swiper-pagination-color: var(--ion-color-primary);
  --swiper-navigation-color: var(--ion-color-primary);
  --swiper-pagination-bullet-inactive-color: var(--ion-color-dark);
}

// Class-based dark mode (ThemeService toggle body.dark/html.ion-palette-dark).
// Reemplaza la regla `@media (prefers-color-scheme: dark)` previa que pisaba el
// manual toggle del user.
body.dark,
html.ion-palette-dark,
body[data-theme='dark'] {
  --ion-color-texti: #8fc1ff;
  --ion-color-texti-rgb: 143, 193, 255;
  --ion-color-texti-contrast: #000000;
  --ion-color-texti-contrast-rgb: 0, 0, 0;
  --ion-color-texti-shade: #7eaae0;
  --ion-color-texti-tint: #9ac7ff;

  --ion-color-darki: #ffffff;
  --ion-color-darki-rgb: 255, 255, 255;
  --ion-color-darki-contrast: #000000;
  --ion-color-darki-contrast-rgb: 0, 0, 0;
  --ion-color-darki-shade: #e0e0e0;
  --ion-color-darki-tint: #ffffff;

  --ion-color-primary: #8f49f8;
  --ion-color-primary-rgb: 143, 73, 248;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #7e40da;
  --ion-color-primary-tint: #9a5bf9;
}

.ion-color-texti {
  --ion-color-base: var(--ion-color-texti);
  --ion-color-base-rgb: var(--ion-color-texti-rgb);
  --ion-color-contrast: var(--ion-color-texti-contrast);
  --ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);
  --ion-color-shade: var(--ion-color-texti-shade);
  --ion-color-tint: var(--ion-color-texti-tint);
}

.ion-color-darki {
  --ion-color-base: var(--ion-color-darki);
  --ion-color-base-rgb: var(--ion-color-darki-rgb);
  --ion-color-contrast: var(--ion-color-darki-contrast);
  --ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);
  --ion-color-shade: var(--ion-color-darki-shade);
  --ion-color-tint: var(--ion-color-darki-tint);
}