// TEMA POR DEFECTO
//
// Este fichero es el *contrato* de theming de la librería: declara todos los
// tokens `--pi-theme-*` que los componentes de `common/` consumen. Un tema
// alternativo no necesita duplicar selectores: le basta con redefinir estos
// tokens (ver `_alternative.scss`).
//
// Los valores viven en `.pi-shell` (no en `:root`) para que puedan convivir
// varios temas en la misma página, y se repiten en `.cdk-overlay-container`
// porque los overlays de Material (diálogos, snackbars, menús) se montan fuera
// del árbol del shell y no heredarían nada.

@mixin defaultThemeTokens {
  // --- Botones ---------------------------------------------------------
  --pi-theme-button-height: var(--pi-spacing-xxx-large);
  --pi-theme-button-radius: var(--pi-border-radius-medium);
  --pi-theme-button-font-weight: 600;
  --pi-theme-button-letter-spacing: normal;
  --pi-theme-button-text-transform: none;
  --pi-theme-button-shadow: none;
  --pi-theme-button-transition: background-color 0.16s ease-in;
  // Superficie del relleno. Por defecto es plano (solo `background-color`);
  // un tema puede inyectar aquí un degradado por color de marca.
  --pi-theme-button-fill-primary: none;
  --pi-theme-button-fill-accent: none;
  --pi-theme-button-fill-warn: none;
  --pi-theme-button-fill-success: none;
  --pi-theme-button-fill-highlighted: none;

  // --- Campos de formulario --------------------------------------------
  --pi-theme-field-radius: 0.875rem;
  --pi-theme-field-border-width: 1px;
  --pi-theme-field-border-color: var(--pi-color-grey-200);
  --pi-theme-field-border-color-hover: var(--pi-color-grey-300);
  --pi-theme-field-border-color-focus: var(--pi-color-primary);
  --pi-theme-field-surface: var(--pi-color-white);
  --pi-theme-field-label-color: var(--pi-color-grey-300);
  // La tipografía de la etiqueta y el radio del chip no se declaran: sus
  // consumidores usan `var(--token, <valor original>)`, así el tema por
  // defecto conserva exactamente el aspecto previo a los tokens.

  // --- Superficies ------------------------------------------------------
  --pi-theme-card-radius: var(--pi-border-radius-large);
  --pi-theme-card-shadow: var(--pi-box-shadow-panel);
  --pi-theme-panel-radius: var(--pi-border-radius-large);

  // --- Puente con Angular Material --------------------------------------
  // Los componentes de Material (slider, checkbox, radio, progress...) pintan
  // con sus roles `--mat-sys-*`, que `mat.theme()` genera de una paleta propia
  // y por tanto ignoran `--pi-color-*`. Aquí se reengancha una cosa con otra.
  //
  // Se define una sola vez, en el tema por defecto y por indirección
  // (`var(--pi-color-*)`): como el tema alternativo redefine esas variables,
  // Material le sigue solo, sin repetir este bloque.
  --mat-sys-primary: var(--pi-color-primary);
  --mat-sys-on-primary: var(--pi-color-white);
  --mat-sys-primary-container: var(--pi-color-primary-100);
  --mat-sys-on-primary-container: var(--pi-color-primary-900);
  --mat-sys-secondary: var(--pi-color-accent);
  --mat-sys-on-secondary: var(--pi-color-white);
  --mat-sys-secondary-container: var(--pi-color-accent-100);
  --mat-sys-on-secondary-container: var(--pi-color-accent-900);
  --mat-sys-tertiary: var(--pi-color-highlighted);
  --mat-sys-on-tertiary: var(--pi-color-white);
  --mat-sys-error: var(--pi-color-warn);
  --mat-sys-on-error: var(--pi-color-white);
}

// Base para *todos* los shells: así un tema solo tiene que declarar lo que
// cambia, y lo que no redefina sigue teniendo valor (incluido el puente con
// Material). Los temas concretos se aplican encima; ver `_alternative.scss`.
.pi-shell,
.cdk-overlay-container {
  @include defaultThemeTokens;
}