:root {
  /* Paleta oficial del tríptico */
  --color-marino: #1E2A5A;
  --color-oliva: #5C6B3C;
  --color-salvia: #DCE2CC;
  --color-hueso: #F1EFE7;
  --color-lila: #8E8AA6;

  --color-bg: var(--color-hueso);
  --color-text: var(--color-marino);
  --color-surface: #FFFFFF;

  /* Variante más oscura de oliva: usada como texto sobre fondos claros
     (salvia/hueso) donde el oliva base no llega al contraste mínimo AA. */
  --color-oliva-dark: #4A5730;
  --color-focus: var(--color-oliva-dark);

  /* Tipografía */
  --font-display: "Nunito", sans-serif;
  --font-body: "Nunito Sans", sans-serif;

  /* Radios (look redondeado/cercano) */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  --container-max: 560px;
  --shadow-soft: 0 10px 28px rgba(30, 42, 90, 0.12);
}

@media (min-width: 720px) {
  :root {
    --container-max: 720px;
  }
}

@media (min-width: 1080px) {
  :root {
    --container-max: 960px;
  }
}