/**
 * Design tokens — valores por defecto (sobrescritos por brand.js)
 * WCAG 2.1 AA: pares de color verificados para texto normal ≥ 4.5:1
 */
:root {
  --brand-primary: #016768;
  --brand-primary-dark: #015f60;
  --brand-primary-header: #006c6d;
  --brand-accent: #c8da2d;
  --brand-accent-text: #231f20;
  --brand-text: #231f20;
  --brand-text-on-primary: #ffffff;
  --brand-surface: #ffffff;
  --brand-surface-muted: #ededee;
  --brand-caption: #e6e7e8;
  --brand-focus-ring: #ffffff;

  --brand-font: 'Proxima Nova', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --brand-content-width: 68.125rem;
  --brand-gutter: 1.5rem;

  /* Alias semánticos usados en componentes */
  --color-teal: var(--brand-primary);
  --color-teal-dark: var(--brand-primary-dark);
  --color-teal-header: var(--brand-primary-header);
  --color-accent: var(--brand-accent);
  --color-text: var(--brand-text);
  --color-gray-caption: var(--brand-caption);
  --color-gray-banner: var(--brand-surface-muted);
  --color-white: var(--brand-surface);
  --color-text-on-primary: var(--brand-text-on-primary);
  --color-focus-ring: var(--brand-focus-ring);

  --content-width: var(--brand-content-width);
  --gutter: var(--brand-gutter);
  --side-margin: max(var(--gutter), calc((100% - var(--content-width)) / 2));
  --font: var(--brand-font);
  --nav-height: 4.125rem;

  --focus-outline-width: 0.1875rem;
  --focus-outline-offset: 0.1875rem;
}