/* Every base value below is sampled from "banner oficial.png" (the palette
   reference named in the client brief) — do not round or re-taste them. */
:root{
  /* — Teal / Alcachofra: the tournament's primary accent ("TAÇA", location pill) — */
  --teal-50:#EAF6F9;
  --teal-100:#D2ECF1;
  --teal-200:#AEDDE6;
  --teal-300:#87CBD9;
  --teal-400:#64BCCC;   /* SAMPLED — brand teal */
  --teal-500:#4CA7B9;
  --teal-600:#37899B;   /* pill shadow / hover */
  --teal-700:#256C7C;
  --teal-800:#164F5C;
  --teal-900:#0B2F38;   /* brand ink on light surfaces */
  --teal-950:#06212A;

  /* — Petrol: the dark half of the hero photograph — */
  --petrol-400:#0A5566;
  --petrol-500:#00485A;
  --petrol-600:#003A46;  /* SAMPLED — banner top-right background */
  --petrol-700:#002B35;

  /* — Cyan: the data-viz glow in the hero (charts, arrows, wireframe bars) — */
  --cyan-300:#5CD8E8;
  --cyan-400:#00A8C2;   /* SAMPLED */
  --cyan-500:#008EA6;

  /* — Lime / Relvado: the date numerals, scores, CTAs — */
  --lime-50:#F4F8E6;
  --lime-100:#E6EFC6;
  --lime-200:#D2E296;
  --lime-300:#B0CE55;
  --lime-400:#98BC33;
  --lime-500:#84AC24;   /* SAMPLED — brand lime */
  --lime-600:#6B8C1C;
  --lime-700:#546E17;
  --lime-800:#3D5010;

  /* — Fairway greens: photographic grass, used for deep sections — */
  --fairway-400:#88A43D;  /* SAMPLED — sunlit grass */
  --fairway-500:#5E9B23;
  --fairway-700:#1C4A17;
  --fairway-900:#0C2414;  /* SAMPLED — blurred treeline */

  /* — Neutrals, tinted a half-degree toward the treeline — */
  --neutral-0:#FFFFFF;
  --neutral-50:#F7F8F5;
  --neutral-100:#ECECEC;  /* SAMPLED — headline off-white */
  --neutral-200:#DDDEDA;
  --neutral-300:#C3C6C1;
  --neutral-400:#9CA09B;
  --neutral-500:#757975;
  --neutral-600:#555A56;
  --neutral-700:#3B403C;
  --neutral-800:#242827;
  --neutral-900:#141817;

  /* — Support: borrowed from the organisers' own marks, for status only — */
  --signal-danger:#A61C22;
  --signal-warning:#D08A16;
  --signal-info:var(--teal-600);
  --signal-success:var(--lime-600);

  /* ——— Semantic aliases: use THESE in components ——— */
  --surface-page:var(--neutral-50);
  --surface-card:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-inverse:var(--teal-900);
  --surface-inverse-alt:var(--petrol-600);
  --surface-accent:var(--teal-400);
  --surface-accent-soft:var(--teal-50);
  --surface-lime:var(--lime-500);
  --surface-lime-soft:var(--lime-50);

  --text-strong:var(--teal-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-inverse:var(--neutral-100);
  --text-inverse-muted:rgba(236,236,236,.72);
  --text-accent:var(--teal-600);
  --text-lime:var(--lime-600);
  --text-on-accent:var(--teal-900);
  --text-on-lime:var(--neutral-0);

  --border-subtle:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-accent:var(--teal-400);
  --border-inverse:rgba(236,236,236,.22);

  --link-color:var(--teal-600);
  --link-color-hover:var(--teal-800);
  --focus-ring:var(--cyan-400);
}