/* Variante 4 — misma estética que la 3, con dos temas.
   Dark (por defecto): cobre sobre azul noche.
   Light: la paleta editorial de la variante 1 (papel crema + dorado de marca),
   con la misma tipografía, radios y composición.
   Todo lo que difiere entre temas vive aquí; layout.css y components.css
   no conocen colores literales. */
/* Dark: pizarra verde-petróleo y ámbar, al modo de los dashboards de cocina
   sobre fondo de pizarra. El oro es el único metal en escena; el resto es
   grafito. */
:root,
:root[data-theme="dark"] {
  --accent-rgb: 233, 180, 76;

  --gold: #E9B44C;
  --gold-deep: #F3D48A;
  --gold-pale: rgba(233,180,76,0.14);
  --ink: #F4F6F5;
  --ink-soft: #93A3A5;
  --paper: #16232A;
  --paper-raised: #1B2C33;
  --rule: #2C4149;
  --rule-strong: #46626C;
  --sankey-link: #E9B44C;
  --sankey-node: #E9B44C;
  --gauge-track: #24373F;
  --on-accent: #15222A;

  /* Las tarjetas son casi negras sobre la pizarra: el contraste lo da el
     filete dorado, no el relleno. */
  --card-bg: rgba(14,24,29,0.78);
  --card-blur: blur(3px);
  --modal-backdrop: rgba(6,13,16,0.82);
  --grain-opacity: 0.05;
  --logo-blend: normal;
  --logo-brightness: 1;
  --glow-strength: 1;
  --shadow-soft: 0 2px 10px rgba(0,0,0,0.55), 0 20px 56px rgba(0,0,0,0.45);

  /* Tile de la referencia: el oro entra por la esquina superior izquierda y se
     apaga en grafito hacia la inferior derecha. El texto va claro encima. */
  --brass: linear-gradient(125deg, #E3AE49 0%, #B78A34 32%, #6A6650 62%, #2B3439 100%);
  --card-edge: rgba(233,180,76,0.55);
  /* Superficie de las tarjetas interiores (roles, tramos, mejoras). */
  /* La llave va casi blanca: sobre pizarra el oro se confundía con las cintas. */
  --brace: #F2F5F4;
  --tile-bg: rgba(10,18,22,0.45);
  --tile-bg-soft: rgba(10,18,22,0.28);

  /* Acentos por categoría: hues desaturados alrededor del cobre de marca.
     Sirven para distinguir, no para decorar — nunca saturados. */
  /* Acentos vivos al modo de los chips de estado del panel: saturados pero
     usados en trazo fino, nunca como relleno grande. */
  --c-1: #4C8DFF;   /* azul     */
  --c-2: #3FCF8E;   /* verde    */
  --c-3: #A77BFF;   /* violeta  */
  --c-4: #E9B44C;   /* ámbar    */
  --c-5: #35C4D7;   /* cian     */
  --c-6: #FF5C7A;   /* rojo     */
  --c-7: #FF9F45;   /* naranja  */
}

:root[data-theme="light"] {
  --accent-rgb: 168, 135, 74;

  --gold: #A8874A;
  --gold-deep: #8A6C36;
  --gold-pale: #EFE6D3;
  --ink: #1C1A17;
  --ink-soft: #5B5548;
  --paper: #FAF8F4;
  --paper-raised: #FFFFFF;
  --rule: #E4DCC8;
  --rule-strong: #CFC3A6;
  --sankey-link: #A8874A;
  --sankey-node: #A8874A;
  --gauge-track: #E4DCC8;
  --on-accent: #FFFFFF;

  --card-bg: rgba(255,255,255,0.72);
  --card-blur: none;
  --modal-backdrop: rgba(28,26,23,0.5);
  --grain-opacity: 0.02;
  --logo-blend: normal;
  --logo-brightness: 1;
  --glow-strength: 0;   /* en claro los glows se apagan: restarían nitidez */
  --shadow-soft: 0 1px 2px rgba(28,26,23,0.04), 0 8px 24px rgba(28,26,23,0.07);
  --brass: linear-gradient(125deg, #C9A85C 0%, #A8874A 38%, #7A6E52 72%, #4A463C 100%);
  --card-edge: rgba(168,135,74,0.45);
  /* En claro la tarjeta es papel blanco sobre el crema del lienzo: el mismo
     recurso (una superficie que se despega del fondo) sin virar a gris. */
  --brace: #6B6455;
  --tile-bg: #FFFFFF;
  --tile-bg-soft: rgba(255,255,255,0.55);

  /* Mismos hues, oscurecidos para leerse sobre papel crema. */
  /* Los mismos hues, bajados de brillo para leerse sobre papel crema. */
  --c-1: #2F6ED8;
  --c-2: #1E9E6A;
  --c-3: #7C4FD1;
  --c-4: #A8874A;
  --c-5: #17879A;
  --c-6: #D23B5C;
  --c-7: #D2761A;
}

/* Escalas y tipografía: idénticas en ambos temas. */
:root {
  --radius: 22px;
  --radius-sm: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --font-display: 'Playfair Display', Georgia, serif;
  /* Los títulos de pantalla son frases, no rótulos: Lora conserva el aire
     editorial con trazos más parejos y se lee mejor en línea larga. */
  --font-title: 'Lora', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Manrope', ui-monospace, monospace;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}