/* ============================================================
   SITC COLOUR SYSTEM  (per Tottenham Hotspur Brand Playbook, Colour 011)
   Core: Lilywhite + Spurs Navy anchor everything.
   Secondary: Blazing Yellow, Hot Terracotta, Paxton Purple, Elm Green,
   each with a Mid and a deep/tertiary tone for gradients + contrast.
   Highlights: Volt + Arctic, used sparingly as accents.
   ============================================================ */
:root{
  /* --- Core palette --- */
  --sitc-lilywhite:#FFFFFF;   /* core: Lilywhite */
  --sitc-navy:#000A3C;        /* core: Spurs Navy (primary ink + surface) */
  --sitc-white:#FFFFFF;

  /* Lilywhite tints (light neutrals from the core palette) */
  --sitc-lily-100:#F5F5FA;
  --sitc-lily-200:#E6E6F0;
  --sitc-silver:#D7D7DC;      /* core: Silver */

  /* --- Secondary: Blazing Yellow --- */
  --sitc-yellow:#FFE100;      /* Blazing Yellow (primary accent) */
  --sitc-yellow-mid:#FABE05;  /* Blazing Yellow Mid */
  --sitc-gold:#BE914B;        /* Gold (tertiary) */

  /* --- Secondary: Hot Terracotta --- */
  --sitc-terracotta:#FC6300;  /* Hot Terracotta */
  --sitc-terracotta-mid:#E15A00; /* Hot Terracotta Mid */
  --sitc-copper:#985A46;      /* Copper (tertiary) */
  --sitc-orange:#FC6300;      /* alias -> Hot Terracotta */

  /* --- Secondary: Paxton Purple --- */
  --sitc-purple:#9441FC;      /* Paxton Purple (brand secondary, the "in the") */
  --sitc-purple-mid:#6423E1;  /* Paxton Purple Mid */
  --sitc-purple-deep:#310780; /* Paxton Purple Dark */

  /* --- Secondary: Elm Green --- */
  --sitc-green:#50FA82;       /* Elm Green */
  --sitc-green-mid:#41CD6E;   /* Elm Green Mid */
  --sitc-green-deep:#289146;  /* Elm Green Dark */

  /* --- Highlights --- */
  --sitc-volt:#E1FF5F;        /* Volt (lime) */
  --sitc-arctic:#64FFEB;      /* Arctic (cyan) */
  --sitc-amber:#FABE05;       /* alias -> Blazing Yellow Mid */

  /* --- Navy ramp (surfaces / depth) --- */
  --sitc-navy-950:#061030;    /* deepest, panels on navy */
  --sitc-navy-900:#000A3C;    /* base navy */
  --sitc-navy-800:#0D1540;
  --sitc-navy-700:#1A2255;
  --sitc-navy-600:#4A5580;    /* muted navy text on light */

  /* --- Neutrals (cool grey, navy-tinted) --- */
  --sitc-grey-900:#0D1540;
  --sitc-grey-600:#64748B;
  --sitc-grey-400:#B0B8CC;
  --sitc-grey-200:#E0E3EF;
  --sitc-grey-100:#F5F6FA;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  --color-bg:#FFFFFF;
  --color-bg-muted:var(--sitc-grey-100);
  --color-surface:#FFFFFF;
  --color-surface-navy:var(--sitc-navy-900);
  --color-surface-navy-deep:var(--sitc-navy-950);

  --text-primary:var(--sitc-navy-900);
  --text-secondary:var(--sitc-navy-600);
  --text-muted:var(--sitc-grey-600);
  --text-on-navy:#FFFFFF;
  --text-on-navy-muted:var(--sitc-grey-400);
  --text-accent:var(--sitc-purple);

  --color-accent:var(--sitc-yellow);
  --color-accent-ink:var(--sitc-navy-900);   /* ink to sit on yellow */
  --color-link:var(--sitc-purple);
  --color-link-hover:var(--sitc-purple-deep);

  --border-subtle:var(--sitc-grey-200);
  --border-strong:var(--sitc-navy-900);
  --border-on-navy:rgba(255,255,255,0.16);

  --focus-ring:var(--sitc-purple);
}