$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;
  --val-container-padding: 16px;

  --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;

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

// 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);
}