/*
  Jelou brand tokens — extraídos de "Manual de identidad Jelou" v3.0 (Nov 2025).
  Ver brand/BRAND_GUIDE.md para el detalle y reglas de uso.
*/

:root {
  /* Marca */
  --jelou-teal-light: #5fc5e3;
  --jelou-teal: #00b4c6;
  --jelou-teal-dark: #206c83;
  --jelou-green: #3dd88d;
  --jelou-navy: #151c2a;
  --jelou-mist: #e6f2f4;

  /* Tipografía */
  --jelou-font-display: 'Montserrat', sans-serif;
  --jelou-font-body: 'DM Sans', sans-serif;

  /* Tema claro (default) */
  --color-bg: #ffffff;
  --color-bg-subtle: var(--jelou-mist);
  --color-text: var(--jelou-navy);
  --color-text-muted: var(--jelou-teal-dark);
  --color-primary: var(--jelou-teal);
  --color-accent: var(--jelou-green);
  --color-border: #d7e6e9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--jelou-navy);
    --color-bg-subtle: #1d2534;
    --color-text: var(--jelou-mist);
    --color-text-muted: var(--jelou-teal-light);
    --color-primary: var(--jelou-teal-light);
    --color-accent: var(--jelou-green);
    --color-border: #2a3446;
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--jelou-navy);
  --color-bg-subtle: #1d2534;
  --color-text: var(--jelou-mist);
  --color-text-muted: var(--jelou-teal-light);
  --color-primary: var(--jelou-teal-light);
  --color-accent: var(--jelou-green);
  --color-border: #2a3446;
}