/* Tokens de marca DGC — fuente: Manual de Marca DGC v1.0 (2026)
   Azul Genoma manda; acentos (ATGC) <= 15 % de la superficie; coral solo para el dato clave. */
:root {
  /* Paleta principal */
  --genoma: #46607F;        /* logo, titulares, acentos */
  --nucleo: #2A3B52;        /* texto, portadas */
  --nucleo-deep: #1D2A3A;
  --bruma: #EDF3FC;         /* fondos, paneles */
  --blanco: #FFFFFF;
  --azul-500: #6E86A6;
  --azul-300: #9FB6D3;
  --azul-200: #C9D7EA;

  /* Paleta de datos · A T G C (orden fijo: Genoma → Coral → Verde → Ámbar → Lila) */
  --base-a: #E0674F;  --base-a-text: #B8452F;  --base-a-tint: #FDF1EE; /* Coral Mutación */
  --base-t: #3E9C9A;  --base-t-text: #2A7573;                           /* Verde Replicación */
  --base-g: #E3A73B;  --base-g-text: #9A6A12;                           /* Ámbar Cromatina */
  --base-c: #8C7BB8;  --base-c-text: #6A5A96;                           /* Lila Telómero */

  /* Tipografía */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Roles semánticos (tema claro) */
  --bg: var(--blanco);
  --bg-alt: var(--bruma);
  --surface: var(--blanco);
  --text: var(--nucleo);
  --text-soft: #46607F;
  --heading: var(--nucleo);
  --line: var(--azul-200);
  --accent: var(--base-a);
  --accent-text: var(--base-a-text);
  --hero-bg: var(--nucleo-deep);
  --shadow: 0 1px 2px rgb(29 42 58 / .06), 0 8px 24px rgb(29 42 58 / .08);
  --shadow-lg: 0 2px 4px rgb(29 42 58 / .08), 0 24px 48px rgb(29 42 58 / .16);

  --radius: 14px;
  --radius-lg: 24px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141E2B;
    --bg-alt: var(--nucleo-deep);
    --surface: #22324A;
    --text: #DCE6F4;
    --text-soft: var(--azul-300);
    --heading: var(--blanco);
    --line: #34485F;
    --accent-text: #F08C78;
    --hero-bg: #0F1722;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3);
    --shadow-lg: 0 24px 48px rgb(0 0 0 / .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141E2B;
  --bg-alt: var(--nucleo-deep);
  --surface: #22324A;
  --text: #DCE6F4;
  --text-soft: var(--azul-300);
  --heading: var(--blanco);
  --line: #34485F;
  --accent-text: #F08C78;
  --hero-bg: #0F1722;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3);
  --shadow-lg: 0 24px 48px rgb(0 0 0 / .45);
  color-scheme: dark;
}