/* ==========================================================================
   02-theme.shoreflair.css
   Shore Flair FC brand theme. Primitives first, then semantic mapping.

   Measured sources (pixel medians, see style guide):
   --sf-mint-500   #86d2c5  jersey/sock mint, median of 33k pixels across 5 team photos
   --sf-pink-500   #fc188a  shorts pink, median of per-photo medians across 5 photos
   --sf-navy-700   #19224d  jersey numeral fill (numeral artwork)
   --sf-crest-navy #001848  crest outline (crest PNG, dominant dark cluster)
   --sf-sky-500    #00a0e0  crest water/sky (crest PNG)
   Everything else is derived from those values.
   ========================================================================== */

:root {
  /* Primitives: navy */
  --sf-navy-950: #050b1f;
  --sf-navy-900: #0a1433;
  --sf-navy-800: #111d45;
  --sf-navy-700: #19224d;
  --sf-navy-600: #26346c;
  --sf-navy-500: #3a4a8a;
  --sf-crest-navy: #001848;

  /* Primitives: mint (kit) */
  --sf-mint-300: #b8e8df;
  --sf-mint-500: #86d2c5;
  --sf-mint-600: #6cc2b4;
  --sf-mint-800: #2f7e72;

  /* Primitives: pink (shorts) */
  --sf-pink-300: #ff6fb2;
  --sf-pink-500: #fc188a;
  --sf-pink-700: #c40a69;

  /* Primitives: support */
  --sf-sky-500: #00a0e0;
  --sf-white: #ffffff;
  --sf-ink-100: #e8ecf6;
  --sf-ink-300: #bcc5de;
  --sf-ink-500: #8d97b8;
  --sf-amber-400: #ffc233;

  /* Fonts */
  --font-display: "Chakra Petch", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-label: "Barlow Condensed", "Arial Narrow", sans-serif;

  /* Semantic mapping: navy base */
  --color-bg: var(--sf-navy-900);
  --color-bg-raised: var(--sf-navy-800);
  --color-bg-sunken: var(--sf-navy-950);
  --color-border: var(--sf-navy-600);
  --color-border-strong: var(--sf-navy-500);
  --color-text: var(--sf-white);
  --color-text-muted: var(--sf-ink-300);
  --color-text-subtle: var(--sf-ink-500);
  --color-accent: var(--sf-mint-500);
  --color-accent-hover: var(--sf-mint-300);
  --color-accent-contrast: var(--sf-navy-950);
  --color-highlight: var(--sf-pink-500);
  --color-highlight-hover: var(--sf-pink-300);
  --color-highlight-contrast: var(--sf-navy-950);
  --color-focus: var(--sf-mint-300);
  --color-flag: var(--sf-amber-400);
  --color-input-bg: var(--sf-navy-950);
  --color-input-border: var(--sf-navy-500);
  --color-error: var(--sf-pink-300);
  --color-success: var(--sf-mint-500);

  /* Jersey numeral: navy fill, white gap, pink outline */
  --numeral-fill: var(--sf-navy-700);
  --numeral-gap: var(--sf-white);
  --numeral-outline: var(--sf-pink-500);
}

/* Mint surface: used sparingly, one band per page */
.theme-mint {
  --color-bg: var(--sf-mint-500);
  --color-bg-raised: var(--sf-white);
  --color-bg-sunken: var(--sf-mint-600);
  --color-border: var(--sf-mint-800);
  --color-border-strong: var(--sf-navy-900);
  --color-text: var(--sf-navy-950);
  --color-text-muted: var(--sf-navy-700);
  --color-text-subtle: var(--sf-navy-600);
  --color-accent: var(--sf-navy-900);
  --color-accent-hover: var(--sf-navy-700);
  --color-accent-contrast: var(--sf-white);
  --color-focus: var(--sf-navy-900);
  --numeral-fill: var(--sf-navy-700);
  --numeral-gap: var(--sf-white);
  --numeral-outline: var(--sf-pink-500);
}

/* White card inside the mint band */
.theme-mint .card,
.theme-mint .tier-card {
  --color-text-muted: var(--sf-navy-600);
}