/*
 * Tema Registro360 — portal ciudadano.
 *
 * Es la identidad institucional: azul marino con acento celeste, tipografías Inter y
 * Plus Jakarta Sans. Sale del prototipo de UX del proyecto.
 *
 * Un tema SOLO redefine tokens. Si acá aparece una regla de componente, el tema dejó de
 * ser intercambiable: cambiarlo pasaría a cambiar el comportamiento y no solo el aspecto.
 */

:root {
  /* Superficies */
  --r3-background: 210 25% 99%;
  --r3-foreground: 217 33% 12%;
  --r3-card: 0 0% 100%;
  --r3-card-foreground: 217 33% 12%;
  --r3-surface: 215 30% 97%;
  --r3-surface-elevated: 0 0% 100%;

  /* Azul institucional */
  --r3-primary: 218 90% 24%;
  --r3-primary-foreground: 0 0% 100%;
  --r3-primary-hover: 218 90% 20%;
  --r3-primary-soft: 218 90% 96%;

  /* Acento celeste institucional */
  --r3-accent: 196 95% 45%;
  --r3-accent-foreground: 0 0% 100%;
  --r3-accent-soft: 196 95% 96%;

  --r3-secondary: 215 25% 96%;
  --r3-secondary-foreground: 217 33% 17%;
  --r3-muted: 215 20% 96%;
  --r3-muted-foreground: 215 16% 47%;

  /* 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: 215 20% 91%;
  --r3-border-strong: 215 20% 84%;
  --r3-input: 215 20% 89%;
  --r3-ring: 218 90% 32%;

  --r3-radius: 0.5rem;

  /* Gradientes. Son tokens y no valores literales 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. */
  --r3-gradient-hero: linear-gradient(180deg, hsl(215 30% 98%) 0%, hsl(215 30% 96%) 100%);
  --r3-gradient-primary: linear-gradient(135deg, hsl(218 90% 24%) 0%, hsl(218 90% 32%) 100%);
  --r3-gradient-subtle: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(215 30% 98%) 100%);

  --r3-shadow-xs: 0 1px 2px 0 hsl(217 33% 12% / 0.04);
  --r3-shadow-sm: 0 1px 2px 0 hsl(217 33% 12% / 0.05), 0 1px 3px 0 hsl(217 33% 12% / 0.04);
  --r3-shadow-md: 0 2px 4px -1px hsl(217 33% 12% / 0.06), 0 4px 8px -2px hsl(217 33% 12% / 0.05);
  --r3-shadow-lg: 0 4px 8px -2px hsl(217 33% 12% / 0.08), 0 12px 24px -4px hsl(217 33% 12% / 0.08);
  --r3-shadow-focus: 0 0 0 4px hsl(218 90% 24% / 0.1);

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

  --r3-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r3-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --r3-sidebar-width: 260px;
  --r3-navbar-height: 64px;
}

/* Tema oscuro: se activa con data-r3-theme="dark" en el elemento raíz. */
[data-r3-theme='dark'] {
  --r3-background: 217 33% 8%;
  --r3-foreground: 210 30% 96%;
  --r3-card: 217 33% 11%;
  --r3-card-foreground: 210 30% 96%;
  --r3-surface: 217 33% 13%;
  --r3-surface-elevated: 217 33% 14%;

  --r3-primary: 210 100% 65%;
  --r3-primary-foreground: 217 33% 8%;
  --r3-primary-hover: 210 100% 70%;
  --r3-primary-soft: 217 33% 16%;

  --r3-accent: 196 95% 55%;
  --r3-accent-foreground: 217 33% 8%;

  --r3-secondary: 217 33% 18%;
  --r3-secondary-foreground: 210 30% 96%;
  --r3-muted: 217 33% 16%;
  --r3-muted-foreground: 215 16% 65%;

  --r3-destructive: 0 65% 55%;
  --r3-destructive-foreground: 0 0% 98%;

  --r3-border: 217 33% 20%;
  --r3-border-strong: 217 33% 25%;
  --r3-input: 217 33% 20%;
  --r3-ring: 210 100% 65%;
  --r3-gradient-hero: linear-gradient(180deg, hsl(217 33% 10%) 0%, hsl(217 33% 8%) 100%);
  --r3-gradient-primary: linear-gradient(135deg, hsl(210 100% 40%) 0%, hsl(210 100% 30%) 100%);
  --r3-gradient-subtle: linear-gradient(180deg, hsl(217 33% 13%) 0%, hsl(217 33% 11%) 100%);
}

/* Si el usuario no eligió tema, se respeta la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-r3-theme='light']) {
    --r3-background: 217 33% 8%;
    --r3-foreground: 210 30% 96%;
    --r3-card: 217 33% 11%;
    --r3-card-foreground: 210 30% 96%;
    --r3-surface: 217 33% 13%;
    --r3-surface-elevated: 217 33% 14%;
    --r3-primary: 210 100% 65%;
    --r3-primary-foreground: 217 33% 8%;
    --r3-primary-hover: 210 100% 70%;
    --r3-primary-soft: 217 33% 16%;
    --r3-accent: 196 95% 55%;
    --r3-accent-foreground: 217 33% 8%;
    --r3-secondary: 217 33% 18%;
    --r3-secondary-foreground: 210 30% 96%;
    --r3-muted: 217 33% 16%;
    --r3-muted-foreground: 215 16% 65%;
    --r3-destructive: 0 65% 55%;
    --r3-destructive-foreground: 0 0% 98%;
    --r3-border: 217 33% 20%;
    --r3-border-strong: 217 33% 25%;
    --r3-input: 217 33% 20%;
    --r3-ring: 210 100% 65%;
    --r3-gradient-hero: linear-gradient(180deg, hsl(217 33% 10%) 0%, hsl(217 33% 8%) 100%);
    --r3-gradient-primary: linear-gradient(135deg, hsl(210 100% 40%) 0%, hsl(210 100% 30%) 100%);
    --r3-gradient-subtle: linear-gradient(180deg, hsl(217 33% 13%) 0%, hsl(217 33% 11%) 100%);
  }
}