/*
 * Registro360.BlazorUI — contrato de tokens.
 *
 * Esta es la superficie que un tema tiene que llenar y la única que los componentes leen.
 * Nada más. Un componente que necesite un color que no esté acá tiene un problema de
 * diseño, no de tokens: o el color pertenece al contrato, o el componente está tomando
 * una decisión de marca que no le corresponde.
 *
 * ── Cómo se carga ──────────────────────────────────────────────────────────
 *
 *   <link rel="stylesheet" href="_content/Registro360.BlazorUI/css/r3-tokens.css" />
 *   <link rel="stylesheet" href="_content/Registro360.BlazorUI/css/themes/registro.css" />
 *   <link rel="stylesheet" href="_content/Registro360.BlazorUI/css/r3-components.css" />
 *
 * En ese orden, y el del medio es el que se cambia. Cargar otro tema —vuexy.css, o uno
 * propio— cambia la aplicación entera sin tocar un solo componente. Ese es el punto de
 * que exista este archivo.
 *
 * ── Por qué los colores van en componentes HSL sueltos ─────────────────────
 *
 * `--r3-primary: 218 90% 24%` y no `hsl(218 90% 24%)`. Guardado así, el componente puede
 * componer opacidades sobre el mismo token —`hsl(var(--r3-primary) / 0.1)`— sin que el
 * tema tenga que declarar una variante por cada transparencia que a alguien se le ocurra.
 *
 * ── Los valores de acá son de reserva ──────────────────────────────────────
 *
 * Una escala de grises, a propósito: una aplicación sin tema tiene que verse legible pero
 * evidentemente sin marca. Si el reserva fuera lindo, nadie notaría que falta el tema.
 */

:root {
  /* Tamaño base de la tipografía.

     16px es el default del navegador y para un portal público se queda corto: esto lo va a
     usar gente de cualquier edad, muchas veces desde el celular y a veces con la vista
     cansada. Todo lo demás se expresa en rem, así que subir esto agranda la interfaz
     entera de forma consistente en vez de parchar tamaños sueltos. */
  --r3-font-size-base: 17px;

  /* ── Superficies ─────────────────────────────────────────────────────── */

  /** Fondo de la página. */
  --r3-background: 0 0% 100%;
  /** Texto sobre el fondo. */
  --r3-foreground: 0 0% 12%;
  /** Fondo de una tarjeta o panel elevado. */
  --r3-card: 0 0% 100%;
  --r3-card-foreground: 0 0% 12%;
  /** Superficie intermedia, más apagada que la tarjeta. */
  --r3-surface: 0 0% 97%;
  --r3-surface-elevated: 0 0% 100%;

  /* ── Marca ───────────────────────────────────────────────────────────── */

  /** Color de acción principal: botones, enlaces, estados activos. */
  --r3-primary: 0 0% 20%;
  /** Texto sobre el color principal. */
  --r3-primary-foreground: 0 0% 100%;
  /** El principal al pasar el mouse o al presionar. */
  --r3-primary-hover: 0 0% 12%;
  /** Fondo tenue del principal: chips, fondos de ícono, filas resaltadas. */
  --r3-primary-soft: 0 0% 94%;

  /** Acento secundario de marca. */
  --r3-accent: 0 0% 35%;
  --r3-accent-foreground: 0 0% 100%;
  --r3-accent-soft: 0 0% 94%;

  /** Acción secundaria: botones de menor peso. */
  --r3-secondary: 0 0% 96%;
  --r3-secondary-foreground: 0 0% 20%;

  /** Contenido de apoyo: fondos apagados y texto de menor jerarquía. */
  --r3-muted: 0 0% 96%;
  --r3-muted-foreground: 0 0% 45%;

  /* ── Estados ─────────────────────────────────────────────────────────── */

  --r3-success: 152 60% 32%;
  --r3-success-foreground: 0 0% 100%;
  --r3-success-soft: 152 50% 96%;

  --r3-warning: 32 95% 44%;
  --r3-warning-foreground: 0 0% 100%;
  --r3-warning-soft: 38 92% 95%;

  --r3-destructive: 0 72% 45%;
  --r3-destructive-foreground: 0 0% 100%;
  --r3-destructive-soft: 0 72% 97%;

  /* ── Bordes y foco ───────────────────────────────────────────────────── */

  --r3-border: 0 0% 89%;
  /** Borde más marcado: separadores que tienen que verse. */
  --r3-border-strong: 0 0% 80%;
  /** Borde de un campo de formulario. */
  --r3-input: 0 0% 85%;
  /** Color del anillo de foco. Es accesibilidad: nunca se quita, se rediseña. */
  --r3-ring: 0 0% 20%;

  /* ── Forma ───────────────────────────────────────────────────────────── */

  --r3-radius: 0.5rem;

  /* ── Tipografía ──────────────────────────────────────────────────────── */

  /** Cuerpo de texto. */
  --r3-font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /** Títulos. Puede ser la misma que la de cuerpo. */
  --r3-font-display: system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Sombras ─────────────────────────────────────────────────────────── */

  --r3-shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.04);
  --r3-shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05), 0 1px 3px 0 hsl(0 0% 0% / 0.04);
  --r3-shadow-md: 0 2px 4px -1px hsl(0 0% 0% / 0.06), 0 4px 8px -2px hsl(0 0% 0% / 0.05);
  --r3-shadow-lg: 0 4px 8px -2px hsl(0 0% 0% / 0.08), 0 12px 24px -4px hsl(0 0% 0% / 0.08);
  /** Anillo de foco. Va como sombra para no mover el layout al aparecer. */
  --r3-shadow-focus: 0 0 0 4px hsl(0 0% 20% / 0.1);

  /* ── Degradados ──────────────────────────────────────────────────────── */

  /*
   * Son tokens y no valores escritos en el componente por la misma razón que los
   * colores: una superficie escrita a mano no acompaña al cambio de tema, y termina
   * clara con texto claro encima. Ya pasó una vez en este proyecto.
   */

  /** Fondo de una portada o encabezado grande. */
  --r3-gradient-hero: linear-gradient(180deg, hsl(0 0% 99%) 0%, hsl(0 0% 96%) 100%);
  /** Relleno de un elemento con el color principal. */
  --r3-gradient-primary: linear-gradient(135deg, hsl(0 0% 20%) 0%, hsl(0 0% 28%) 100%);
  /** Transición suave entre dos superficies claras. */
  --r3-gradient-subtle: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);

  /* ── Movimiento ──────────────────────────────────────────────────────── */

  --r3-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Medidas del armazón ─────────────────────────────────────────────── */

  --r3-navbar-height: 3.5rem;
  --r3-sidebar-width: 15rem;
}