/* RESPIRA — Color tokens
   Source of truth: "Bases colors i tipografies.idml" (brand guidelines).
   RESPIRA is a digital magazine about the Pyrenees: nature, hiking, culture. */

:root {
  /* ---- Base palette ---- */
  --respira-green: #00532c;      /* Brand / logo on light backgrounds */
  --respira-white: #ffffff;      /* Logo on dark backgrounds, general page bg */
  --respira-black: #000000;      /* General body text */
  --respira-cream: #f7f2ee;      /* Warm paper — Festival section bg, technical-data panels */
  --respira-taupe: #b69584;      /* Senderisme (Hiking) — type, icons, route names */
  --respira-sage: #b4cbb8;       /* La Transpirinenca — highlight panels */

  /* Green tints/shades (derived for UI states — hover/press/borders) */
  --respira-green-700: #003d20;
  --respira-green-600: #00532c;
  --respira-green-500: #0a6b3c;
  --respira-green-100: #dbe8e0;

  /* Warm neutrals derived from cream/taupe for lines and muted surfaces */
  --respira-cream-dark: #ede4db;
  --respira-taupe-100: #efe7e1;
  --respira-ink-70: #3d3d3d;
  --respira-ink-50: #6b6b6b;
  --respira-ink-30: #9a9a9a;
  --respira-hairline: #e3dcd4;

  /* ---- Semantic aliases ---- */
  --color-brand: var(--respira-green);
  --color-brand-hover: var(--respira-green-700);
  --color-brand-contrast: var(--respira-white);

  --surface-page: var(--respira-white);
  --surface-page-warm: var(--respira-cream);     /* Festival / editorial warm pages */
  --surface-card: var(--respira-white);
  --surface-panel: var(--respira-cream);          /* technical-data / callout panels */
  --surface-sage: var(--respira-sage);            /* highlight blocks (Transpirinenca) */
  --surface-inverse: var(--respira-green);

  --text-body: var(--respira-black);
  --text-muted: var(--respira-ink-50);
  --text-heading: var(--respira-black);
  --text-brand: var(--respira-green);
  --text-hiking: var(--respira-taupe);            /* Senderisme accent text */
  --text-on-brand: var(--respira-white);
  --text-on-sage: var(--respira-green);

  --border-hairline: var(--respira-hairline);
  --border-strong: var(--respira-black);
}