/*
  Design Tokens — fuente única de verdad para toda la app.
  Dos temas conviven hoy (mismo nombre de variable, valor propio de cada uno):
    [data-theme="admin"]  → panel interno (admin/afiliado/abogado), claro/cálido
    [data-theme="public"] → auth + landing + legal + errores, oscuro verde/dorado
  El look final (cuál gana, o si se fusionan) se decide en la etapa de diseño.
  Por ahora esto solo centraliza — nadie más redefine estas variables en ningún otro archivo.

  Paleta oficial final "Legado de Honor" (.docs/Paleta de Colores.png):
    Verdes:   #171f12  #2b321e  #39391d  #454829
    Dorados:  #865e21  #b5873b  #d7ae60  #ffeba3
    Adicionales: #d32625 (rojo) #ff9628 (naranja) #4bc400 (verde) #ffffff #000000
  No hay gris ni azul en la paleta oficial. Los neutros de superficie/borde/texto
  del tema admin (fondo claro) se derivan con color-mix() a partir de blanco/negro
  y un toque de dorado — no son colores nuevos, son mezclas de los ya aprobados.
  --info usa el naranja #ff9628 (reemplaza los azules sueltos que no son de la
  paleta oficial) para diferenciarlo de éxito (verde), alerta (dorado) y error (rojo).
*/

:root {
  /* Compartido entre ambos temas (idéntico hoy en los dos) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Degradado dorado compartido (botones, títulos, marcas) — fuente única,
     no volver a escribir estos stops en ningún otro CSS. */
  --gradient-gold-shimmer: linear-gradient(90deg,
    var(--color-accent-gold-500) 0%,
    var(--color-accent-yellow) 20%,
    var(--color-accent-gold-400) 40%,
    var(--color-accent-cream) 60%,
    var(--color-accent-yellow) 80%,
    var(--color-accent-gold-500) 100%);
  --gradient-gold-shimmer-hover: linear-gradient(90deg,
    var(--color-accent-yellow) 0%,
    var(--color-accent-cream) 33%,
    var(--color-accent-cream) 67%,
    var(--color-accent-yellow) 100%);
  --gradient-gold-vertical: linear-gradient(180deg, var(--color-accent-yellow) 0%, var(--color-accent-gold-400) 100%);
  --gradient-gold-vertical-reverse: linear-gradient(270deg, var(--color-accent-yellow) 0%, var(--color-accent-gold-400) 100%);
  --gradient-sheen-diagonal: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);

  /* Variante para botones sobre fondo claro (tarjetas blancas del admin) —
     mismos 4 tonos dorados, no reemplaza a --gradient-gold-shimmer (esa se
     conserva para login y botones sobre fondo oscuro). */
  --gradient-gold-shimmer-light: linear-gradient(90deg,
    var(--color-accent-gold-500) 0%,
    var(--color-accent-gold-400) 33%,
    var(--color-accent-cream) 67%,
    var(--color-accent-yellow) 100%);
  --gradient-gold-shimmer-light-hover: linear-gradient(90deg,
    var(--color-accent-gold-400) 0%,
    var(--color-accent-cream) 33%,
    var(--color-accent-cream) 67%,
    var(--color-accent-gold-400) 100%);
  --gradient-cream-shimmer: linear-gradient(90deg,
    var(--color-accent-gold-400) 0%,
    var(--color-accent-cream) 50%,
    var(--color-accent-yellow) 100%);
}

[data-theme="admin"] {
  /* === ESTRUCTURA OSCURA (sidebar, navbar, footer) === */
  --color-green-950: #171f12;
  --color-green-925: #2b321e;
  --sidebar: var(--color-green-950);
  --sidebar-soft: color-mix(in srgb, #d7ae60 8%, transparent);
  --sidebar-gradient-start: var(--color-green-950);
  --sidebar-gradient-end: var(--color-green-925);

  --navbar-bg: var(--color-green-925);
  --navbar-bg-strong: var(--sidebar-gradient-end);
  --navbar-border: #39391d;
  --navbar-link: #ffeba3;
  --navbar-link-muted: color-mix(in srgb, #ffeba3 55%, transparent);
  --navbar-link-hover-bg: color-mix(in srgb, #d7ae60 8%, transparent);
  --navbar-input-bg: #454829;
  --navbar-input-border: #39391d;
  --navbar-profile-bg: #454829;
  --navbar-profile-border: #39391d;

  --brand: #b5873b;
  --brand-soft: #454829;

  --footer-text: #ffeba3;
  --footer-link: #ffeba3;
  --footer-link-muted: color-mix(in srgb, #ffeba3 45%, transparent);

  /* === ACENTO DORADO === */
  --color-accent-yellow: #b5873b;
  --color-accent-gold-500: #865e21;
  --color-accent-gold-400: #d7ae60;
  --color-accent-cream: #ffeba3;

  --accent: var(--color-accent-yellow);
  --accent-primary: var(--color-accent-yellow);
  --accent-hover: #d7ae60;
  --accent-gold: var(--color-accent-gold-500);
  --border-gold: var(--color-accent-gold-500);
  --accent-gold-soft: var(--color-accent-gold-400);

  /* === FONDOS DE CONTENIDO (cálido neutro) === */
  /* Neutros derivados de blanco/negro + un toque de dorado — no hay gris en la paleta oficial */
  --card-bg: #ffffff;
  --card-border: color-mix(in srgb, #000000 14%, #ffffff);
  --card-muted: color-mix(in srgb, #000000 48%, #ffffff);

  --surface: #ffffff;
  --surface-2: color-mix(in srgb, #d7ae60 6%, #ffffff);
  --surface-3: color-mix(in srgb, #d7ae60 10%, #ffffff);
  --surface-light: color-mix(in srgb, #d7ae60 8%, #ffffff);

  --bg: #ffffff;
  --bg-alt: color-mix(in srgb, #d7ae60 5%, #ffffff);
  --bg-elevated: #ffffff;
  --bg-primary: #ffffff;
  --bg-input: #ffffff;

  --line: color-mix(in srgb, #000000 12%, #ffffff);
  --line-strong: color-mix(in srgb, #000000 22%, #ffffff);
  --line-light: color-mix(in srgb, #000000 8%, #ffffff);

  /* === TEXTOS SOBRE FONDO CLARO === */
  --color-white: #ffffff;
  --color-off-white: color-mix(in srgb, #d7ae60 4%, #ffffff);
  --color-muted: color-mix(in srgb, #000000 42%, #ffffff);
  --color-ink: #171f12;
  --color-ink-soft: color-mix(in srgb, #171f12 85%, #ffffff);

  --text: color-mix(in srgb, #000000 62%, #ffffff);
  --text-strong: #171f12;
  --text-muted: color-mix(in srgb, #000000 42%, #ffffff);
  --muted: var(--text-muted);

  --text-primary: var(--text-strong);
  --text-secondary: var(--text);
  --text-gold: var(--color-accent-yellow);
  --text-gold-bright: #ffeba3;
  --text-inverse: var(--color-ink);

  --on-primary: var(--color-ink);
  --on-dark: color-mix(in srgb, #d7ae60 15%, #ffffff);
  --on-surface: var(--text);
  --on-accent: var(--color-ink);
  --on-accent-strong: #000000;
  --on-gold: var(--color-ink);

  /* === LAYOUT === */
  --layout-content-bg: color-mix(in srgb, #d7ae60 5%, #ffffff);
  --layout-content-bg-soft: color-mix(in srgb, #d7ae60 3%, #ffffff);

  /* === ESTADOS INTERACTIVOS === */
  --hover-overlay-light: rgba(0, 0, 0, 0.04);
  --hover-overlay-dark: rgba(0, 0, 0, 0.08);

  --focus-ring: 0 0 0 3px color-mix(in srgb, #b5873b 25%, transparent);
  --focus-ring-alt: 0 0 0 3px color-mix(in srgb, #d7ae60 25%, transparent);

  --ease-flyout: cubic-bezier(0.16, 1, 0.3, 1);

  /* === ESTADOS SEMÁNTICOS === */
  --success: #4bc400;
  --warning: var(--color-accent-yellow);
  --danger: #d32625;
  --info: #ff9628;

  --on-success: #000000;
  --on-warning: var(--color-ink);
  --on-danger: #ffffff;
  --on-info: #000000;

  /* === BORDES OSCUROS (sidebar, navbar) === */
  --border-default: #39391d;
  --border-subtle: #2b321e;

  /* === BORDES Y SOMBRAS (para fondo claro) === */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.05);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.10);

  /* === TIPOGRAFÍA === */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-heading: 'Montserrat', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
}

[data-theme="public"] {
  /* Paleta oficial final "Legado de Honor" (.docs/Paleta de Colores.png) */
  --color-green-900: #454829;
  --color-green-950: #171f12;
  --color-green-925: #2b321e;
  --color-green-moss-2: #39391d;
  --color-accent-yellow: #b5873b;
  --color-accent-gold-500: #865e21;
  --color-accent-gold-400: #d7ae60;
  --color-accent-button: #b5873b;
  --color-accent-cream: #ffeba3;
  --color-placeholder: color-mix(in srgb, #d7ae60 25%, #ffffff);
  --color-white: #ffffff;
  --color-off-white: color-mix(in srgb, #d7ae60 12%, #ffffff);
  --color-muted: color-mix(in srgb, #ffffff 65%, transparent);
  --color-ink: #171f12;
  --color-ink-soft: #2b321e;

  --bg: var(--color-green-900);
  --bg-alt: var(--color-green-950);
  --surface: var(--color-green-925);
  --surface-2: #39391d;
  --surface-soft: color-mix(in srgb, var(--color-green-950) 90%, transparent);
  --surface-glass: color-mix(in srgb, #ffffff 8%, transparent);
  --surface-glass-strong: color-mix(in srgb, #ffffff 12%, transparent);

  --line: color-mix(in srgb, #ffffff 14%, transparent);
  --line-strong: color-mix(in srgb, #ffffff 24%, transparent);

  --text: var(--color-off-white);
  --text-strong: var(--color-white);
  --text-muted: var(--color-muted);
  --on-accent: var(--color-ink);

  --gradient-bg-main: linear-gradient(145deg, var(--color-green-950) 0%, var(--color-green-900) 52%, var(--color-green-925) 100%);
  --gradient-hero: linear-gradient(160deg, color-mix(in srgb, var(--color-green-900) 92%, transparent) 0%, color-mix(in srgb, var(--color-green-925) 76%, transparent) 58%, color-mix(in srgb, var(--color-green-950) 95%, transparent) 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-accent-gold-400) 0%, var(--color-accent-button) 100%);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --font-sans: "Montserrat", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 34px;

  /* Tamaño de logo por defecto; registro_usuario.css hoy usa 112px propio — es un ajuste
     de layout de esa página puntual, no una variable de color, se mantiene como override local. */
  --brand-logo-size: 250px;
  --brand-logo-size-mobile: 88px;

  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.38);
  --hover-overlay-light: rgba(255, 255, 255, 0.08);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent-yellow) 35%, transparent);

  --success: #4bc400;
  --warning: var(--color-accent-yellow);
  --danger: #d32625;
  --info: #ff9628;
  --on-success: #000000;
  --on-danger: #ffffff;
  --on-info: #000000;
}