/* Font: one self-hosted variable font for everything (no third-party request): Sofia Sans, weights 1 to 1000, SIL Open
   Font Licence (Grant, 15 Oct 2026). Display headings use it at a heavier weight. */
@font-face { font-family: "Sofia Sans"; src: url(/fonts/sofia-sans.woff2) format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }

/* ==========================================================================
   Braidwood Sports, Stage 1 design tokens.
   Spec: stage1-design-tokens.md. Every text pair here was checked against
   WCAG AA (4.5:1 text, 3:1 for control edges, glyphs and focus).
   A hex value is written ONLY in this file. Components use the semantic names.

   Theme: DARK is the first-visit default (set by theme-boot.js); LIGHT is the other full theme and
   "Match device" follows prefers-color-scheme. <html data-theme="light|dark"> forces either; no attribute means
   "match my phone". Dark: midnight-blue surfaces lit by an emerald glow. Light: cool paper, the same emerald.
   Palette: the navy surfaces of the blue look (15 Oct 2026) with the emerald accent of the logo (Grant, 15 Oct 2026:
   "Let's go with green"), gold as the warm accent. Green is also "paid" and other good news. Owner: shell lane.
   ========================================================================== */

:root {
  /* ---- Brand primitives (reference only, do not use in components) ---- */
  --bw-navy: #0A2A5C;
  --bw-emerald: #22D36E;
  --bw-cyan: #19C3E6;
  --bw-gold: #F6C85F;

  /* ---- Type ---- */
  --font-sans: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: var(--font-display); /* the logo lettering is in the logo image itself */
  --font-num: var(--font-sans);
  /* scale: 12 / 14 / 16 / 18 / 22 / 28 / 34. Body is 16 so iOS never zooms inputs. */
  --fs-xs: 0.75rem;   /* 12, tiny labels only, never body */
  --fs-sm: 0.875rem;  /* 14, meta lines, chips */
  --fs-md: 1rem;      /* 16, body, inputs, row names */
  --fs-lg: 1.125rem;  /* 18, section titles */
  --fs-xl: 1.375rem;  /* 22, page title on phone */
  --fs-2xl: 1.75rem;  /* 28, page title on desktop, tile figures */
  --fs-3xl: 2.125rem; /* 34, rare hero numbers */
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing, 4px base ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;
  --gutter: 16px;             /* phone side gutter */
  --gutter-lg: 32px;          /* desktop content gutter */

  /* ---- Radius ---- */
  --r-xs: 4px;    /* membership tag (square-ish on purpose) */
  --r-sm: 8px;    /* inputs, small buttons */
  --r-md: 12px;   /* buttons, list groups, cards */
  --r-lg: 16px;   /* panels, dialogs */
  --r-xl: 20px;   /* bottom sheet top corners */
  --r-pill: 999px;/* payment pill, filter chips, avatars */

  /* ---- Sizing ---- */
  --tap: 44px;          /* floor for anything tappable */
  --ctl-h: 48px;        /* default button and input height */
  --ctl-h-sm: 44px;     /* compact, still at the floor */
  --ctl-h-lg: 56px;     /* primary full-width phone actions */
  --bottom-nav-h: 64px;
  --top-bar-h: 56px;
  --side-nav-w: 280px; /* wide enough for a club name such as "Carrickshore FC" on one line beside its crest (Grant, 22 Oct 2026) */
  --content-max: 1120px;
  --reading-max: 680px;

  /* ---- Motion ---- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-spring: cubic-bezier(.2, .9, .25, 1.15);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- Marketing-site extras (theme-independent) ---- */
  --on-gold: #0A2A5C;        /* text and icons on gold fills, AA in both themes */
  --device-bezel: #081A28;   /* the phone frame in the home-page mockup */
  /* the pitch-side LED board on the home page: a dark board in both themes, so its lights are fixed colours */
  --led-off: #060E1C; --led-green: #5CE6A0; --led-blue: #8FD3FF; --led-white: #ECF6FA; /* green, light blue and white (Grant, 19 Oct 2026) */

  /* ---- Avatars: hue is set per person (js/core/fx.js); white initials stay AA on these ---- */
  --avatar-sat: 62%; --avatar-l1: 32%; --avatar-l2: 24%; --avatar-text: #FFFFFF;

  /* ---- Layers ---- */
  --z-nav: 20; --z-sheet: 40; --z-dialog: 50; --z-toast: 60;
}

/* ===================== LIGHT ==================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --page: #F1F5FB; --panel: #F7F9FD; --card: #FFFFFF; --raised: #FFFFFF;
  --line: #D6DEEC; --control-line: #66789A; --overlay: rgba(6, 14, 34, .5);
  --text: #0C1A33; --text-2: #34445F; --text-3: #4A5873;
  --text-body: #26344E; /* running text on the marketing pages (site.css): firmer than --text-2 (Grant, 15 Oct 2026) */
  --accent-text: #0B7A48; --brand-text: #0A5E7A;
  --primary: #0B7D4B; --primary-hover: #096A40; --on-primary: #FFFFFF;
  --secondary-bg: #E4EAF5; --secondary-hover: #D6DEEC;
  --danger-fill: #B42318; --on-danger: #FFFFFF;
  --focus: #B45309; --selected-bg: #DDF3EA;
  --shadow-1: 0 1px 2px rgba(12,26,51,.06), 0 2px 8px rgba(12,26,51,.05);
  --shadow-2: 0 6px 20px rgba(12,26,51,.10), 0 2px 6px rgba(12,26,51,.06);
  --shadow-3: 0 18px 50px rgba(12,26,51,.22), 0 4px 12px rgba(12,26,51,.08);
  /* status tones: bg (tag fill), fg (text), line (glyph and pill edge) */
  --ok-bg: #DDF3EA;   --ok-fg: #0C6039;   --ok-line: #2E8B57;
  --warn-bg: #FFF1CC; --warn-fg: #7A4300; --warn-line: #B26B00;
  /* filled payment pills (Grant, 19 Oct 2026): amber and red for what needs doing; --ok-fill is kept for a filled green if ever wanted */
  --warn-fill: #F5A524; --on-warn-fill: #2B1700;
  --ok-fill: #1E7A48; --on-ok-fill: #FFFFFF; --bad-fill: #C8372D; --on-bad-fill: #FFFFFF;
  /* the message at the bottom (toast): green, with a bar that runs down (Grant, 19 Oct 2026) */
  --toast-bg: #0B7D4B; --toast-fg: #FFFFFF; --toast-line: #0B7D4B; --toast-bar: #9BF0C2;
  --bad-bg: #FCE6E4;  --bad-fg: #A3231B;  --bad-line: #C8372D;
  --info-bg: #DFEFF8; --info-fg: #175677; --info-line: #2F7FA8;
  --neu-bg: #E6EBF3;  --neu-fg: #3A4A5F;  --neu-line: #66789A;
  /* depth and colour layer (used by effects.css; decorative, never the only carrier of meaning) */
  --gold: #C98A12; --gold-fg: #7A4E00; --gold-bg: #FBF0D4;
  --cyan: #0A7F8C;
  --grad-brand: linear-gradient(135deg, #0B7D4B 0%, #0A7F8C 100%);
  --grad-brand-hover: linear-gradient(135deg, #096A40 0%, #086C77 100%);
  --grad-text: linear-gradient(100deg, #0A5E7A 0%, #0B7D4B 60%, #1B8A3C 100%);
  --grad-gold: linear-gradient(135deg, #F4C95D 0%, #C98A12 100%);
  --grad-card: linear-gradient(165deg, #FFFFFF 0%, #F3F6FC 100%);
  --grad-side: linear-gradient(180deg, #F9FAFE 0%, #EDF2FA 100%);
  --page-mesh: radial-gradient(900px 520px at 6% -8%, rgba(11,125,75,.13), transparent 62%), radial-gradient(760px 520px at 104% 2%, rgba(10,127,140,.14), transparent 58%), radial-gradient(700px 520px at 50% 112%, rgba(201,138,18,.07), transparent 62%);
  --glass: rgba(255,255,255,.78); --glass-line: rgba(12,26,51,.08);
  --glow: rgba(11,125,75,.30); --glow-cyan: rgba(10,127,140,.20);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.95);
  --ring: 0 0 0 1px rgba(12,26,51,.06);
  --glare: rgba(255,255,255,.55);
}

/* ============================== DARK ===================================== */
/* Follows the device when the person chose "Match device"; forced by data-theme="dark". The two blocks below
   hold the same values; test/ui/shell-lane.test.js checks they stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:   #081530;
    --panel:  #0C1C3B;
    --card:   #10244A;
    --raised: #162E5A;
    --line:   #22375F;
    --control-line: #6A86B8;
    --overlay: rgba(2, 6, 18, .72);

    --text:   #EAF0FB;
    --text-2: #BBC8E0;
    --text-3: #9BACCB;
    --text-body: #D2DCEE;
    --accent-text: #5CE6A0;
    --brand-text: #8CF5BE;

    --primary: #3EDC87;
    --primary-hover: #5BE59C;
    --on-primary: #03210F;
    --secondary-bg: #162E5A;
    --secondary-hover: #1E3A6E;
    --danger-fill: #FF8A7D;
    --on-danger: #2A0E0C;
    --focus: #FFD166;
    --selected-bg: #0F3F44;

    --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.22);
    --shadow-2: 0 8px 26px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.3);
    --shadow-3: 0 22px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35);

    --ok-bg: #0F3F33;   --ok-fg: #9BF0C0;   --ok-line: #4FD68F;
    --warn-bg: #4A3205; --warn-fg: #FFC94D; --warn-line: #F5A524; --warn-fill: #F5A524; --on-warn-fill: #2B1700; --ok-fill: #4FD68F; --on-ok-fill: #03210F; --bad-fill: #FF8A7D; --on-bad-fill: #3A0905; --toast-bg: #0F5C3A; --toast-fg: #FFFFFF; --toast-line: #3EDC87; --toast-bar: #3EDC87;
    --bad-bg: #47222B;  --bad-fg: #FFB5AD;  --bad-line: #FF8A7D;
    --info-bg: #12384F; --info-fg: #A9E2FA; --info-line: #4FB8E8;
    --neu-bg: #1B2F52;  --neu-fg: #D2DCEC;  --neu-line: #8BA0C2;

    --gold: #F6C85F; --gold-fg: #FFD97A; --gold-bg: #3F3512;
    --cyan: #19C3E6;
    --grad-brand: linear-gradient(135deg, #46E58B 0%, #26D3B6 100%);
    --grad-brand-hover: linear-gradient(135deg, #62EDA0 0%, #3EDCC2 100%);
    --grad-text: linear-gradient(100deg, #8CF5BE 0%, #5CE6A0 40%, #5CCBF0 100%);
    --grad-gold: linear-gradient(135deg, #FFE08A 0%, #F6C85F 55%, #D9A02A 100%);
    --grad-card: linear-gradient(165deg, #142C58 0%, #0E2248 100%);
    --grad-side: linear-gradient(180deg, #0C1D3E 0%, #081530 100%);
    --page-mesh: radial-gradient(900px 520px at 6% -8%, rgba(62,220,135,.17), transparent 62%), radial-gradient(760px 540px at 104% 2%, rgba(30,150,230,.22), transparent 58%), radial-gradient(700px 520px at 50% 112%, rgba(246,200,95,.08), transparent 62%);
    --glass: rgba(10,24,54,.76); --glass-line: rgba(170,200,255,.16);
    --glow: rgba(62,220,135,.38); --glow-cyan: rgba(25,195,230,.30);
    --edge-light: inset 0 1px 0 rgba(200,220,255,.08);
    --ring: 0 0 0 1px rgba(170,200,255,.10);
    --glare: rgba(200,225,255,.16);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:   #081530;
  --panel:  #0C1C3B;
  --card:   #10244A;
  --raised: #162E5A;
  --line:   #22375F;
  --control-line: #6A86B8;
  --overlay: rgba(2, 6, 18, .72);

  --text:   #EAF0FB;
  --text-2: #BBC8E0;
  --text-3: #9BACCB;
  --text-body: #D2DCEE;
  --accent-text: #5CE6A0;
  --brand-text: #8CF5BE;

  --primary: #3EDC87;
  --primary-hover: #5BE59C;
  --on-primary: #03210F;
  --secondary-bg: #162E5A;
  --secondary-hover: #1E3A6E;
  --danger-fill: #FF8A7D;
  --on-danger: #2A0E0C;
  --focus: #FFD166;
  --selected-bg: #0F3F44;

  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.22);
  --shadow-2: 0 8px 26px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.3);
  --shadow-3: 0 22px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35);

  --ok-bg: #0F3F33;   --ok-fg: #9BF0C0;   --ok-line: #4FD68F;
  --warn-bg: #4A3205; --warn-fg: #FFC94D; --warn-line: #F5A524; --warn-fill: #F5A524; --on-warn-fill: #2B1700; --ok-fill: #4FD68F; --on-ok-fill: #03210F; --bad-fill: #FF8A7D; --on-bad-fill: #3A0905; --toast-bg: #0F5C3A; --toast-fg: #FFFFFF; --toast-line: #3EDC87; --toast-bar: #3EDC87;
  --bad-bg: #47222B;  --bad-fg: #FFB5AD;  --bad-line: #FF8A7D;
  --info-bg: #12384F; --info-fg: #A9E2FA; --info-line: #4FB8E8;
  --neu-bg: #1B2F52;  --neu-fg: #D2DCEC;  --neu-line: #8BA0C2;

  --gold: #F6C85F; --gold-fg: #FFD97A; --gold-bg: #3F3512;
  --cyan: #19C3E6;
  --grad-brand: linear-gradient(135deg, #46E58B 0%, #26D3B6 100%);
  --grad-brand-hover: linear-gradient(135deg, #62EDA0 0%, #3EDCC2 100%);
  --grad-text: linear-gradient(100deg, #8CF5BE 0%, #5CE6A0 40%, #5CCBF0 100%);
  --grad-gold: linear-gradient(135deg, #FFE08A 0%, #F6C85F 55%, #D9A02A 100%);
  --grad-card: linear-gradient(165deg, #142C58 0%, #0E2248 100%);
  --grad-side: linear-gradient(180deg, #0C1D3E 0%, #081530 100%);
  --page-mesh: radial-gradient(900px 520px at 6% -8%, rgba(62,220,135,.17), transparent 62%), radial-gradient(760px 540px at 104% 2%, rgba(30,150,230,.22), transparent 58%), radial-gradient(700px 520px at 50% 112%, rgba(246,200,95,.08), transparent 62%);
  --glass: rgba(10,24,54,.76); --glass-line: rgba(170,200,255,.16);
  --glow: rgba(62,220,135,.38); --glow-cyan: rgba(25,195,230,.30);
  --edge-light: inset 0 1px 0 rgba(200,220,255,.08);
  --ring: 0 0 0 1px rgba(170,200,255,.10);
  --glare: rgba(200,225,255,.16);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}

/* The Last One Standing ticker is dark in both themes: the competition logo in our bright green, and its glow. */
:root {
  --ticker-mark: #5CE6A0; --ticker-mark-glow: rgba(62, 220, 135, .45);
}