/* =========================================================================
   DRC LEOPARDS — theme layer
   Extends the Mustard Systems token foundation (tokens.css) with the
   Democratic Republic of the Congo national colours: sky blue, red, gold.
   Dark terminal canvas + tricolore accents. Load AFTER tokens.css.
   ========================================================================= */

:root {
  /* ---- DRC national colours -------------------------------------------- */
  --drc-blue-50:  #e7f6ff;
  --drc-blue-200: #8fd6f7;
  --drc-blue-400: #2fb4ee;   /* bright sky highlight */
  --drc-blue-500: #00A3E0;   /* PRIMARY — the home shirt sky blue */
  --drc-blue-600: #0784b6;
  --drc-blue-700: #0a5f84;
  --drc-blue-900: #082a3d;

  --drc-red-400:  #ff5563;
  --drc-red-500:  #E11D2A;   /* the flag's diagonal red */
  --drc-red-600:  #b8121f;
  --drc-red-900:  #3a0b10;

  --drc-gold-300: #ffe066;
  --drc-gold-500: #F4CC00;   /* the star / mustard — already brand gold */
  --drc-gold-600: #c2a300;

  /* Re-point the inherited accent to DRC sky blue for this site.
     Gold stays available for stars, KPIs, trophies. */
  --accent:        var(--drc-blue-500);
  --accent-hover:  var(--drc-blue-400);
  --accent-press:  var(--drc-blue-600);
  --fg-link:       var(--drc-blue-400);
  --fg-link-hover: var(--drc-blue-200);
  --border-focus:  var(--drc-blue-500);

  /* surfaces tuned a touch cooler/deeper for the stadium-at-night feel */
  --bg-deep:   #070d18;
  --bg-canvas: #0b1220;
  --bg-panel:  #111a2b;
  --bg-elevated: #16203250;

  --shadow-focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--drc-blue-500);
  --glow-blue: 0 0 0 1px var(--drc-blue-600), 0 0 40px -8px rgba(0,163,224,0.55);
  --glow-gold: 0 0 0 1px var(--drc-gold-600), 0 0 40px -8px rgba(244,204,0,0.45);
  --glow-red:  0 0 0 1px var(--drc-red-600), 0 0 40px -8px rgba(225,29,42,0.5);

  /* leopard-spot ink */
  --spot: rgba(255,255,255,0.025);
}

/* Photo credits — Wikimedia Commons attribution under the players grid */
#photo-credits { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); }
#photo-credits .credits-title {
  font-family: var(--ms-font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--drc-gold-500);
}
#photo-credits .credits-note {
  margin: 8px 0 14px;
  max-width: 70ch;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--fg-tertiary);
}
#photo-credits .credits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 28px;
}
#photo-credits .credits-list li {
  font-family: var(--ms-font-mono);
  font-size: var(--fs-3xs);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
#photo-credits a { color: var(--fg-link); text-decoration: none; }
#photo-credits a:hover { color: var(--fg-link-hover); text-decoration: underline; }

/* The recurring DRC diagonal — red bar bordered gold, like the flag */
.drc-diagonal {
  background:
    linear-gradient(115deg,
      transparent 0 calc(50% - 2px),
      var(--drc-gold-500) calc(50% - 2px) calc(50% - 0.5px),
      var(--drc-red-500)  calc(50% - 0.5px) calc(50% + 6px),
      var(--drc-gold-500) calc(50% + 6px) calc(50% + 7.5px),
      transparent calc(50% + 7.5px) 100%);
}