/* Inter, self-hosted.
 *
 * Bruno used to ship no font at all, so it rendered in whatever the host had —
 * and with no fallback stack that meant the browser's own default, a serif. The
 * stack below is the safety net; these two faces are the actual fix.
 *
 * Self-hosted rather than pulled from the Google Fonts CDN, on purpose. A CDN
 * @import would send every visitor's IP to Google, which a German court ruled a
 * GDPR breach in 2022 — not a risk worth carrying in a regulated betting
 * product. It would also make first paint depend on a third party and break
 * offline entirely. These files are 134KB together, load from the same origin as
 * the rest of the package, and work with no network.
 *
 * One variable face per subset covers every weight the DS uses (500, 600, 700)
 * and every weight it could, in one request each. latin-ext is included for
 * European team names: Beşiktaş and Crvena zvezda are content this DS shows.
 *
 * Licensed under SIL OFL 1.1, which explicitly permits bundling and
 * redistribution. The licence ships beside the fonts in `fonts/LICENSE.txt`, as
 * OFL requires. Font files are copied to `dist/fonts/` on build, so the URLs
 * below resolve relative to `dist/tokens.css` in a consumer.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  /* swap, not block: a fallback face for a moment beats invisible text, and the
     stack below is chosen so the swap is not a jarring one. */
  font-display: swap;
  src: url('./fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root,
:host {
  /* primitives */
  --colour-black: #000000;
  --colour-amber-1: #fffbeb;
  --colour-amber-2: #fef3c7;
  --colour-amber-3: #fde68a;
  --colour-amber-4: #fcd34d;
  --colour-amber-5: #fbbf24;
  --colour-amber-6: #f59e0b;
  --colour-amber-7: #d97706;
  --colour-amber-8: #b45309;
  --colour-amber-9: #92400e;
  --colour-amber-10: #78350f;
  --colour-amber-11: #451a03;
  --colour-amber-12: #361402;
  --colour-green-1: #f7fdf6;
  --colour-green-2: #e6fae5;
  --colour-green-3: #c2f2c3;
  --colour-green-4: #91e794;
  --colour-green-5: #5edc62;
  --colour-green-6: #2dd232;
  --colour-green-7: #00c807;
  --colour-green-8: #05aa06;
  --colour-green-9: #008e02;
  --colour-green-10: #007203;
  --colour-green-11: #015a02;
  --colour-green-12: #014702;
  --colour-grey-dark-1: #111111;
  --colour-grey-dark-2: #191919;
  --colour-grey-dark-3: #222222;
  --colour-grey-dark-4: #2a2a2a;
  --colour-grey-dark-5: #313131;
  --colour-grey-dark-6: #3a3a3a;
  --colour-grey-dark-7: #484848;
  --colour-grey-dark-8: #606060;
  --colour-grey-dark-9: #6e6e6e;
  --colour-grey-dark-10: #7b7b7b;
  --colour-grey-dark-11: #b4b4b4;
  --colour-grey-dark-12: #eeeeee;
  --colour-grey-light-1: #fcfcfc;
  --colour-grey-light-2: #f9f9f9;
  --colour-grey-light-3: #f0f0f0;
  --colour-grey-light-4: #e8e8e8;
  --colour-grey-light-5: #e0e0e0;
  --colour-grey-light-6: #d9d9d9;
  --colour-grey-light-7: #cecece;
  --colour-grey-light-8: #bbbbbb;
  --colour-grey-light-9: #8d8d8d;
  --colour-grey-light-10: #838383;
  --colour-grey-light-11: #646464;
  --colour-grey-light-12: #202020;
  --colour-red-1: #fef2f2;
  --colour-red-2: #fee2e2;
  --colour-red-3: #fecaca;
  --colour-red-4: #fca5a5;
  --colour-red-5: #f87171;
  --colour-red-6: #ef4444;
  --colour-red-7: #dc2626;
  --colour-red-8: #b91c1c;
  --colour-red-9: #991b1b;
  --colour-red-10: #7f1d1d;
  --colour-red-11: #450a0a;
  --colour-red-12: #350808;
  --colour-white: #ffffff;
  --colour-dark-alpha-0: rgba(0, 0, 0, 0);
  --colour-dark-alpha-1: rgba(0, 0, 0, 0.1);
  --colour-dark-alpha-2: rgba(0, 0, 0, 0.2);
  --colour-dark-alpha-3: rgba(0, 0, 0, 0.3);
  --colour-dark-alpha-4: rgba(0, 0, 0, 0.4);
  --colour-dark-alpha-5: rgba(0, 0, 0, 0.5);
  --colour-dark-alpha-6: rgba(0, 0, 0, 0.6);
  --colour-dark-alpha-7: rgba(0, 0, 0, 0.7);
  --colour-dark-alpha-8: rgba(0, 0, 0, 0.8);
  --colour-dark-alpha-9: rgba(0, 0, 0, 0.9);
  --colour-light-alpha-0: rgba(232, 232, 232, 0);
  --colour-light-alpha-1: rgba(232, 232, 232, 0.1);
  --colour-light-alpha-2: rgba(232, 232, 232, 0.2);
  --colour-light-alpha-3: rgba(232, 232, 232, 0.3);
  --colour-light-alpha-4: rgba(232, 232, 232, 0.4);
  --colour-light-alpha-5: rgba(232, 232, 232, 0.5);
  --colour-light-alpha-6: rgba(232, 232, 232, 0.6);
  --colour-light-alpha-7: rgba(232, 232, 232, 0.7);
  --colour-light-alpha-8: rgba(232, 232, 232, 0.8);
  --colour-light-alpha-9: rgba(232, 232, 232, 0.9);
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  /* Each family carries a fallback stack. Figma's variables hold the bare family
     name, and a bare name is a trap in CSS: if the face is not installed and the
     host app has not loaded it, the browser drops to its OWN default, which is a
     serif on every major engine. Bruno ships as a library and does not bundle a
     webfont, so that is the normal case in a consumer that forgot the @font-face,
     and it was showing up as serif headings across the iOS components. The first
     entry is still exactly what Figma specifies; everything after it only ever
     applies when the first is unavailable. */
  --typography-font-family-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --typography-font-family-serif: Georgia, 'Times New Roman', Times, serif;
  --typography-font-family-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  --typography-font-size-xxs: 10px;
  --typography-font-size-xs: 12px;
  --typography-font-size-sm: 14px;
  --typography-font-size-base: 16px;
  --typography-font-size-lg: 18px;
  --typography-font-size-xl: 20px;
  --typography-font-size-2xl: 24px;
  --typography-font-size-3xl: 30px;
  --typography-font-size-4xl: 36px;
  --typography-font-size-5xl: 40px;
  --typography-font-size-6xl: 48px;
  --typography-font-size-7xl: 60px;
  --typography-font-size-8xl: 72px;
  --typography-font-size-9xl: 96px;
  --typography-font-weight-thin: 100;
  --typography-font-weight-extralight: 200;
  --typography-font-weight-light: 300;
  --typography-font-weight-normal: 400;
  --typography-font-weight-medium: 500;
  --typography-font-weight-semibold: 600;
  --typography-font-weight-bold: 700;
  --typography-font-weight-extrabold: 800;
  --typography-font-weight-black: 900;
  --typography-line-height-3: 12px;
  --typography-line-height-4: 16px;
  --typography-line-height-5: 20px;
  --typography-line-height-6: 24px;
  --typography-line-height-7: 28px;
  --typography-line-height-8: 32px;
  --typography-line-height-9: 36px;
  --typography-line-height-10: 40px;
  --typography-line-height-11: 48px;
  --typography-line-height-none: 1;
  --typography-line-height-tight: 1.25;
  --typography-line-height-snug: 1.375;
  --typography-line-height-normal: 1.5;
  --typography-line-height-relaxed: 1.625;
  --typography-line-height-loose: 2;
  --opacity-0: 0%;
  --opacity-5: 5%;
  --opacity-10: 10%;
  --opacity-15: 15%;
  --opacity-20: 20%;
  --opacity-25: 25%;
  --opacity-30: 30%;
  --opacity-35: 35%;
  --opacity-40: 40%;
  --opacity-45: 45%;
  --opacity-50: 50%;
  --opacity-55: 55%;
  --opacity-60: 60%;
  --opacity-65: 65%;
  --opacity-70: 70%;
  --opacity-75: 75%;
  --opacity-80: 80%;
  --opacity-85: 85%;
  --opacity-90: 90%;
  --opacity-95: 95%;
  --opacity-100: 100%;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-full: 9999px;
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-3-5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-13: 52px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-16: 64px;
  --spacing-18: 72px;
  --spacing-19-5: 78px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-27: 108px;
  --spacing-27-5: 110px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;
  --spacing-43: 172px;
  --spacing-44: 176px;
  --spacing-48: 192px;
  --spacing-52: 208px;
  --spacing-56: 224px;
  --spacing-60: 240px;
  --spacing-64: 256px;
  --spacing-70: 280px;
  --spacing-72: 288px;
  --spacing-76: 304px;
  --spacing-80: 320px;
  --spacing-92-5: 370px;
  --spacing-96: 384px;
  --spacing-97-5: 390px;
  /* breakpoints — the shared screen-size ladder (values mirror Tailwind).
     SOURCE OF TRUTH for designers + screen specs. NOTE: CSS forbids using a
     custom property inside a @container/@media *condition*, so query code must
     repeat the literal px below. Keep the two in sync (src/tokens.breakpoints.test.ts). */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  /* page gutter ladder — side margins a *page* wrapper uses; widens with the viewport.
     Components never read these; only the consuming page/screen wrapper does. */
  --page-max-inline-size: 640px;    /* content never grows past this; extra space becomes margin */
  --gutter-base: var(--spacing-4);  /* 16px — the 402px-frame default */
  --gutter-md: var(--spacing-6);    /* 24px */
  --gutter-lg: var(--spacing-8);    /* 32px */
  --gutter-xl: var(--spacing-12);   /* 48px */
  --icon-size-xs: 12px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
  --icon-size-2xl: 28px;
  --icon-size-3xl: 32px;
  --icon-size-4xl: 64px;
  --icon-size-5xl: 80px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --motion-duration-fast: 150ms;
  --motion-duration-moderate: 300ms;
  --motion-duration-slow: 400ms;
  --motion-easing-standard: ease;

  /* spring easings: damped-spring step response sampled into linear(), mirroring
     SwiftUI's duration+bounce model (damping ratio = 1 - bounce). Peak overshoot
     is 0% / 0.6% / 4.6% respectively. Pair with --motion-duration-*. */
  --motion-easing-smooth: linear(0, 0.0481, 0.1543, 0.2802, 0.4052, 0.5188, 0.617, 0.6991, 0.7659, 0.8195, 0.8618, 0.8948, 0.9204, 0.94, 0.9549, 0.9663, 0.9749, 0.9813, 0.9861, 0.9897, 0.9924, 0.9944, 0.9959, 1);
  --motion-easing-snappy: linear(0, 0.0458, 0.1516, 0.2828, 0.4173, 0.5425, 0.6519, 0.7432, 0.8166, 0.8736, 0.9166, 0.948, 0.9702, 0.9853, 0.9951, 1.0011, 1.0044, 1.0059, 1.0063, 1.006, 1.0053, 1.0045, 1.0036, 1);
  --motion-easing-bouncy: linear(0, 0.0672, 0.22, 0.4026, 0.5798, 0.732, 0.8515, 0.9376, 0.9942, 1.0271, 1.0424, 1.0459, 1.0423, 1.035, 1.0266, 1.0185, 1.0117, 1.0063, 1.0025, 1.0001, 0.9986, 0.998, 0.9979, 1);

  /* shadows (theme-invariant; from Figma effect styles shadow/*) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-none: 0 0 #0000;

  /*
   * theme: Light — semantic colour usage contract
   *
   * The structured comments in this block are the canonical source of truth
   * for semantic colour meaning. Read them before choosing colour for a new
   * component, then create a component-owned alias to the matching semantic
   * token. Dark theme declarations inherit this intent and only change values.
   */
  /**
   * @meaning Default neutral surface for cards, rows, and resting controls.
   * @use Component containers placed on the page canvas.
   * @avoid Page backgrounds, selected states, and destructive actions.
   * @pair --fg-primary, --border-primary.
   * @theme Changes between Light and Dark themes.
   */
  --bg-primary: var(--colour-grey-light-2);
  /**
   * @meaning Subordinate neutral surface one step stronger than the default component surface.
   * @use Nested regions, secondary controls, and grouped content within a primary surface.
   * @avoid Page canvases and regions that need stronger tertiary or brand emphasis.
   * @pair --fg-primary, --border-secondary.
   * @theme Changes between Light and Dark themes.
   */
  --bg-secondary: var(--colour-grey-light-3);
  /**
   * @meaning Highest-emphasis brand surface used to make a primary action or state dominant.
   * @use Primary actions, selected controls, and compact brand-emphasis regions.
   * @avoid General card backgrounds and low-priority content.
   * @pair --fg-accent-brand, --border-accent.
   * @theme Inverts between black in Light and white in Dark.
   */
  --bg-accent-brand: var(--colour-black);
  /**
   * @meaning Strong positive surface communicating success, a win, or a confirmed positive outcome.
   * @use Positive badges, chart fills, and high-emphasis success regions.
   * @avoid Neutral selection, decoration, and warning or destructive states.
   * @pair --fg-on-dark, --border-positive.
   * @theme Changes between Light and Dark themes.
   * @constraint White small text may not reach WCAG AA on every resolved green; validate text contrast for the rendered context.
   */
  --bg-positive-primary: var(--colour-green-8);
  /**
   * @meaning Subtle default boundary between a component surface and adjacent content.
   * @use Card outlines, row dividers, and separators on primary or page surfaces.
   * @avoid Boundaries that need selected, positive, negative, or stronger neutral emphasis.
   * @pair --bg-primary, --bg-page.
   * @theme Changes between Light and Dark themes.
   */
  --border-primary: var(--colour-grey-light-3);
  /**
   * @meaning Medium neutral boundary stronger than the default separator.
   * @use Dividers or outlines that must remain visible between neighbouring neutral surfaces.
   * @avoid Focus indicators and semantic positive or negative boundaries.
   * @pair --bg-primary, --bg-secondary.
   * @theme Changes between Light and Dark themes.
   */
  --border-secondary: var(--colour-grey-light-4);
  /**
   * @meaning Application page canvas behind all component surfaces.
   * @use View and screen backgrounds.
   * @avoid Cards, rows, resting controls, and nested component containers.
   * @pair --fg-primary, --bg-primary.
   * @theme Changes between Light and Dark themes.
   */
  --bg-page: var(--colour-white);
  /**
   * @meaning Positive foreground for success text, icons, and outcome indicators.
   * @use Concise positive labels, icons, and data marks on neutral surfaces.
   * @avoid Large filled regions, neutral emphasis, and negative messaging.
   * @pair --bg-page, --bg-primary.
   * @theme Changes between Light and Dark themes.
   * @constraint Do not assume this colour passes WCAG AA for small text; use it for text only after checking contrast in context.
   */
  --fg-positive: var(--colour-green-8);
  /**
   * @meaning Highest-emphasis foreground for primary content.
   * @use Titles, body copy, key values, and primary icons on neutral surfaces.
   * @avoid Disabled content and deliberately subordinate metadata.
   * @pair --bg-page, --bg-primary.
   * @theme Changes between Light and Dark themes.
   */
  --fg-primary: var(--colour-grey-light-12);
  /**
   * @meaning Secondary foreground for supporting content with reduced emphasis.
   * @use Metadata, secondary labels, helper copy, and supporting icons.
   * @avoid Primary instructions, disabled content, and text on fixed dark or light contexts.
   * @pair --bg-page, --bg-primary.
   * @theme Changes between Light and Dark themes.
   */
  --fg-secondary: var(--colour-grey-light-11);
  /**
   * @meaning Positive boundary signalling success or a confirmed positive state.
   * @use Outlines, dividers, and indicator edges that accompany positive content.
   * @avoid Using a border as the only signal of success.
   * @pair --bg-positive-primary, --fg-positive.
   * @theme Changes between Light and Dark themes.
   */
  --border-positive: var(--colour-green-8);
  /**
   * @meaning Brand-emphasis boundary for selected or accent regions.
   * @use Outlines paired with the brand accent surface or strong brand selection.
   * @avoid Keyboard focus indication and general card separation.
   * @pair --bg-accent-brand, --fg-accent-brand.
   * @theme Inverts between black in Light and white in Dark.
   */
  --border-accent: var(--colour-black);
  /**
   * @meaning Strong negative surface communicating error, loss, or a destructive action.
   * @use Destructive controls, error badges, and high-emphasis negative states.
   * @avoid Neutral selection, warnings, and decorative red accents.
   * @pair --fg-on-dark, --border-negative.
   * @theme Fixed to the same red across Light and Dark themes.
   */
  --bg-negative: var(--colour-red-7);
  /**
   * @meaning Negative boundary for an error, loss, or destructive state.
   * @use Error outlines and dividers that accompany explicit negative text or icons.
   * @avoid Using a border as the only signal of an error.
   * @pair --bg-negative, --fg-negative.
   * @theme Fixed to the same red across Light and Dark themes.
   */
  --border-negative: var(--colour-red-7);
  /**
   * @meaning Negative foreground for error, loss, and destructive messaging.
   * @use Error labels, destructive icons, and concise negative status indicators on neutral surfaces.
   * @avoid Filled negative regions and decorative red details without semantic meaning.
   * @pair --bg-page, --bg-primary.
   * @theme Fixed to the same red across Light and Dark themes.
   */
  --fg-negative: var(--colour-red-7);
  /**
   * @meaning Inactive surface showing that a control or region is unavailable.
   * @use Disabled control backgrounds and unavailable placeholders.
   * @avoid Resting neutral surfaces and read-only content that remains perceivable.
   * @pair --fg-disabled, --border-secondary.
   * @theme Changes between Light and Dark themes.
   */
  --bg-disabled: var(--colour-grey-light-4);
  /**
   * @meaning Deliberately low-emphasis foreground for unavailable content.
   * @use Labels and icons inside disabled controls when another cue also communicates the state.
   * @avoid Essential information, helper text, and any interactive enabled state.
   * @pair --bg-disabled, --bg-page.
   * @theme Changes between Light and Dark themes.
   * @constraint Disabled contrast is intentionally reduced and is not a substitute for disabled semantics or another non-colour cue.
   */
  --fg-disabled: var(--colour-grey-light-8);
  /**
   * @meaning Strong neutral surface for elevated hierarchy, prominent headers, and tertiary controls.
   * @use Header bands, tertiary controls, and regions needing more separation than secondary surfaces.
   * @avoid Page canvases and high-emphasis brand or status states.
   * @pair --fg-primary, --border-tertiary.
   * @theme Changes between Light and Dark themes.
   */
  --bg-tertiary: var(--colour-grey-light-4);
  /**
   * @meaning Strongest neutral surface in the progressive surface ladder.
   * @use Compact selected-neutral states and deeply nested regions needing maximum neutral separation.
   * @avoid Brand selection, destructive actions, and broad page areas.
   * @pair --fg-primary, --border-tertiary.
   * @theme Changes between Light and Dark themes.
   */
  --bg-quaternary: var(--colour-grey-light-5);
  /**
   * @meaning Strong neutral boundary at the top of the neutral border hierarchy.
   * @use Outlines and dividers that must stand apart from primary and secondary borders.
   * @avoid Focus rings and positive, negative, or brand state boundaries.
   * @pair --bg-tertiary, --bg-quaternary.
   * @theme Changes between Light and Dark themes.
   */
  --border-tertiary: var(--colour-grey-light-5);
  /**
   * @meaning Foreground designed specifically for the current brand accent surface.
   * @use Labels and icons placed directly on --bg-accent-brand.
   * @avoid Neutral surfaces and fixed light or dark media contexts.
   * @pair --bg-accent-brand, --border-accent.
   * @theme Inverts between white in Light and black in Dark.
   */
  --fg-accent-brand: var(--colour-white);
  /**
   * @meaning Fixed white foreground for content known to sit on a dark backdrop.
   * @use Text and icons on dark media, black surfaces, or dark outcome fills.
   * @avoid Theme-responsive neutral surfaces and backdrops whose luminance is unknown.
   * @pair --bg-on-light, --bg-negative.
   * @theme Fixed across Light and Dark themes.
   */
  --fg-on-dark: var(--colour-white);
  /**
   * @meaning Foreground for the inverse brand accent surface and inverse active states.
   * @use Labels and icons placed directly on --bg-accent-brand-inverted.
   * @avoid The standard brand accent surface and general neutral content.
   * @pair --bg-accent-brand-inverted, --border-accent-inverted.
   * @theme Inverts between black in Light and white in Dark.
   */
  --fg-accent-brand-inverted: var(--colour-black);
  /**
   * @meaning Inverse of the current brand accent surface for pressed or reversed brand contexts.
   * @use Inverse active states and regions intentionally reversing the normal brand polarity.
   * @avoid Default brand actions and ordinary neutral cards.
   * @pair --fg-accent-brand-inverted, --border-accent-inverted.
   * @theme Inverts between white in Light and black in Dark.
   */
  --bg-accent-brand-inverted: var(--colour-white);
  /**
   * @meaning Boundary designed for the inverse brand accent surface.
   * @use Outlines paired with --bg-accent-brand-inverted.
   * @avoid Standard accent regions, neutral separation, and focus indication.
   * @pair --bg-accent-brand-inverted, --fg-accent-brand-inverted.
   * @theme Inverts between white in Light and black in Dark.
   */
  --border-accent-inverted: var(--colour-white);
  /**
   * @meaning Tertiary foreground for low-priority but still available content.
   * @use De-emphasised icons, tertiary labels, and subtle metadata.
   * @avoid Primary instructions, disabled states, and text that must meet stronger contrast.
   * @pair --bg-page, --bg-primary.
   * @theme Changes between Light and Dark themes.
   */
  --fg-tertiary: var(--colour-grey-light-10);
  /**
   * @meaning Fixed black foreground for content known to sit on a light backdrop.
   * @use Text and icons on white media, pale artwork, or fixed light status surfaces.
   * @avoid Theme-responsive neutral surfaces and backdrops whose luminance is unknown.
   * @pair --bg-on-dark, --bg-accent-light-green.
   * @theme Fixed across Light and Dark themes.
   */
  --fg-on-light: var(--colour-black);
  /**
   * @meaning Fixed light surface for elements deliberately placed within a dark context.
   * @use White chips, cut-outs, or inverse blocks on known dark backdrops.
   * @avoid Theme-responsive component cards and the page canvas.
   * @pair --fg-on-light, --border-accent-inverted.
   * @theme Fixed across Light and Dark themes.
   */
  --bg-on-dark: var(--colour-white);
  /**
   * @meaning Deeper positive surface for layered success graphics and secondary positive emphasis.
   * @use Secondary bands or details within a positive composition.
   * @avoid Default success surfaces, neutral cards, and standalone text backgrounds without contrast review.
   * @pair --fg-on-dark, --bg-positive-primary.
   * @theme Changes between Light and Dark themes.
   */
  --bg-positive-secondary: var(--colour-green-10);
  /**
   * @meaning Yellow status foreground for warnings, favourites, and card indicators.
   * @use Small icons and marks whose surrounding text also explains the state.
   * @avoid Body text, large surfaces, and decoration with no status meaning.
   * @pair --bg-page, --bg-primary.
   * @theme Fixed across Light and Dark themes.
   * @constraint Contrast varies by surface and is not guaranteed for text; pair with a textual or structural status cue.
   */
  --fg-accent-yellow: var(--colour-amber-6);
  /**
   * @meaning Red status foreground for card events or specialised negative indicators.
   * @use Small semantic marks and icons on neutral surfaces.
   * @avoid General destructive copy when --fg-negative expresses the intent more clearly.
   * @pair --bg-page, --bg-primary.
   * @theme Fixed across Light and Dark themes.
   * @constraint Colour must not be the only status cue.
   */
  --fg-accent-red: var(--colour-red-7);
  /**
   * @meaning Yellow status surface for warning or card-event cells.
   * @use Compact status fills with an explicit label or icon.
   * @avoid General highlights and text-only warnings without contrast validation.
   * @pair --fg-on-dark, --fg-on-light.
   * @theme Fixed across Light and Dark themes.
   * @constraint Choose the fixed foreground that contrasts with the resolved surface and verify it in context.
   */
  --bg-accent-yellow: var(--colour-amber-6);
  /**
   * @meaning Red status surface for specialised negative events distinct from generic error UI.
   * @use Compact card-event cells and domain-specific negative marks.
   * @avoid Destructive controls when --bg-negative is the clearer semantic role.
   * @pair --fg-on-dark, --border-negative.
   * @theme Fixed across Light and Dark themes.
   */
  --bg-accent-red: var(--colour-red-7);
  /**
   * @meaning Positive chart fill for won, successful, or above-target data.
   * @use Filled bars, cells, and chart regions that encode a positive outcome.
   * @avoid Success messages outside data visualisation and foreground strokes.
   * @pair --fg-chart-positive, --fg-on-dark.
   * @theme Changes between Light and Dark themes.
   * @constraint Charts must also expose the outcome through labels, position, or another non-colour cue.
   */
  --bg-chart-positive: var(--colour-green-8);
  /**
   * @meaning Opaque end of the primary neutral fade used to soften a content edge.
   * @use As the start stop of a gradient paired with --gradient-primary-end.
   * @avoid Standalone fills and gradients with unrelated end tokens.
   * @pair --gradient-primary-end, --bg-primary.
   * @theme Changes polarity between Light and Dark themes.
   */
  --gradient-primary-start: var(--colour-light-alpha-8);
  /**
   * @meaning Transparent end of the primary neutral content-edge fade.
   * @use As the end stop of a gradient paired with --gradient-primary-start.
   * @avoid Standalone fills and gradients with unrelated start tokens.
   * @pair --gradient-primary-start, --bg-primary.
   * @theme Changes polarity between Light and Dark themes.
   */
  --gradient-primary-end: var(--colour-light-alpha-0);
  /**
   * @meaning First stop of the positive statistics gradient.
   * @use As the start stop of a positive data or insight gradient.
   * @avoid Neutral fades and gradients with unrelated end tokens.
   * @pair --gradient-stat-end, --fg-on-dark.
   * @theme Fixed across Light and Dark themes.
   */
  --gradient-stat-start: var(--colour-green-8);
  /**
   * @meaning Second stop of the positive statistics gradient.
   * @use As the end stop paired with --gradient-stat-start.
   * @avoid Neutral fades and gradients with unrelated start tokens.
   * @pair --gradient-stat-start, --fg-on-dark.
   * @theme Fixed across Light and Dark themes.
   */
  --gradient-stat-end: var(--colour-green-6);
  /**
   * @meaning Opaque end of the secondary surface-to-transparent fade.
   * @use As the start stop of an insight or overlay gradient paired with --gradient-secondary-end.
   * @avoid Primary content-edge fades and gradients with unrelated end tokens.
   * @pair --gradient-secondary-end, --fg-primary.
   * @theme Changes between white in Light and black in Dark.
   */
  --gradient-secondary-start: var(--colour-white);
  /**
   * @meaning Transparent end of the secondary surface fade.
   * @use As the end stop paired with --gradient-secondary-start.
   * @avoid Primary content-edge fades and gradients with unrelated start tokens.
   * @pair --gradient-secondary-start, --fg-primary.
   * @theme Changes polarity between Light and Dark themes.
   */
  --gradient-secondary-end: var(--colour-light-alpha-0);
  /**
   * @meaning Fixed pale-green decorative surface for positive artwork and patterns.
   * @use Non-textual branded artwork layers and positive decorative shapes.
   * @avoid Success messaging, interactive states, and general component surfaces.
   * @pair --fg-on-light, --bg-page.
   * @theme Fixed across Light and Dark themes.
   * @constraint This specialised art colour is not a general-purpose accessible background.
   */
  --bg-accent-light-green: var(--colour-green-5);
  /**
   * @meaning Fixed dark surface for elements deliberately placed within a light context.
   * @use Black chips, cut-outs, or inverse blocks on known light backdrops.
   * @avoid Theme-responsive component cards and the page canvas.
   * @pair --fg-on-dark, --border-accent.
   * @theme Fixed across Light and Dark themes.
   */
  --bg-on-light: var(--colour-black);
  /**
   * @meaning Neutral chart fill for lost, unsuccessful, or comparison data.
   * @use Filled bars and cells encoding a non-positive chart outcome.
   * @avoid Generic disabled UI and negative error states.
   * @pair --fg-chart-negative, --fg-secondary.
   * @theme Changes between Light and Dark themes.
   * @constraint Charts must expose the outcome through labels, position, or another non-colour cue.
   */
  --bg-chart-negative: var(--colour-grey-light-4);
  /**
   * @meaning Positive chart foreground for axes, strokes, and data marks.
   * @use Chart lines, axes, labels, and marks that encode a positive outcome.
   * @avoid General success copy and filled chart regions.
   * @pair --bg-chart-positive, --bg-page.
   * @theme Changes between Light and Dark themes.
   * @constraint Validate thin strokes and small labels against their actual chart background.
   */
  --fg-chart-positive: var(--colour-green-8);
  /**
   * @meaning Neutral chart foreground for axes and marks representing a lost outcome.
   * @use Non-positive chart strokes and axes where a neutral, not destructive, meaning is intended.
   * @avoid Body text, error messaging, and fills outside data visualisation.
   * @pair --bg-chart-negative, --fg-secondary.
   * @theme Changes between Light and Dark themes.
   * @constraint This low-emphasis token may not meet text contrast requirements; do not use it for essential labels.
   */
  --fg-chart-negative: var(--colour-grey-light-4);
  /**
   * @meaning Lowest-emphasis available foreground in the neutral emphasis ladder.
   * @use Resting utility icons and non-essential details that remain enabled.
   * @avoid Body copy, instructions, disabled content, and essential controls.
   * @pair --bg-page, --bg-primary.
   * @theme Changes between Light and Dark themes.
   * @constraint Use only where low contrast is intentional and the information is available elsewhere.
   */
  --fg-quaternary: var(--colour-grey-light-9);
  /**
   * @meaning Green accent foreground for positive trends and domain-specific positive emphasis.
   * @use Trend labels, positive icons, and concise accent marks on neutral surfaces.
   * @avoid Generic success copy when --fg-positive is the clearer role.
   * @pair --bg-page, --bg-primary.
   * @theme Changes between Light and Dark themes.
   * @constraint Colour must not be the only cue for trend direction.
   */
  --fg-accent-green: var(--colour-green-8);
  /**
   * @meaning Green accent surface for positive trend icons and specialised branded status marks.
   * @use Compact positive-trend icon containers and domain-specific accent fills.
   * @avoid General success regions and neutral selected states.
   * @pair --fg-on-dark, --fg-accent-green.
   * @theme Changes between Light and Dark themes.
   */
  --bg-accent-green: var(--colour-green-8);
  /**
   * @meaning High-visibility keyboard focus indication for the current theme.
   * @use Focus rings around interactive elements using the shared ring width and offset tokens.
   * @avoid Borders, selected states, and non-keyboard decorative outlines.
   * @pair --bg-page, --bg-primary.
   * @theme Inverts between black in Light and white in Dark.
   * @constraint Preserve a visible offset and verify the ring against both the control and its surrounding surface.
   */
  --focus-ring-colour: var(--colour-black);
  /**
   * @meaning Translucent hover overlay calibrated for the default neutral surface.
   * @use Layered over --bg-primary for pointer hover feedback.
   * @avoid Standalone backgrounds and hover states on other base surfaces.
   * @pair --bg-primary, --fg-primary.
   * @theme Changes polarity between Light and Dark themes.
   * @constraint Composite this token over its named base; its resolved alpha colour is not meaningful alone.
   */
  --bg-primary-hover: var(--colour-dark-alpha-1);
  /**
   * @meaning Translucent hover overlay calibrated for the secondary neutral surface.
   * @use Layered over --bg-secondary for pointer hover feedback.
   * @avoid Standalone backgrounds and hover states on other base surfaces.
   * @pair --bg-secondary, --fg-primary.
   * @theme Changes polarity between Light and Dark themes.
   * @constraint Composite this token over its named base; its resolved alpha colour is not meaningful alone.
   */
  --bg-secondary-hover: var(--colour-dark-alpha-1);
  /**
   * @meaning Translucent hover overlay calibrated for the tertiary neutral surface.
   * @use Layered over --bg-tertiary for pointer hover feedback.
   * @avoid Standalone backgrounds and hover states on other base surfaces.
   * @pair --bg-tertiary, --fg-primary.
   * @theme Changes polarity between Light and Dark themes.
   * @constraint Composite this token over its named base; its resolved alpha colour is not meaningful alone.
   */
  --bg-tertiary-hover: var(--colour-dark-alpha-1);
  /**
   * @meaning Translucent hover overlay calibrated for the brand accent surface.
   * @use Layered over --bg-accent-brand for pointer hover feedback.
   * @avoid Standalone backgrounds and hover states on neutral or negative bases.
   * @pair --bg-accent-brand, --fg-accent-brand.
   * @theme Changes polarity between Light and Dark themes.
   * @constraint Composite this token over its named base; its resolved alpha colour is not meaningful alone.
   */
  --bg-accent-brand-hover: var(--colour-light-alpha-2);
  /**
   * @meaning Translucent hover overlay calibrated for the negative surface.
   * @use Layered over --bg-negative for destructive-control hover feedback.
   * @avoid Standalone backgrounds and hover states on brand or neutral bases.
   * @pair --bg-negative, --fg-on-dark.
   * @theme Declared in both themes and currently resolves to the same light overlay.
   * @constraint Composite this token over its named base; its resolved alpha colour is not meaningful alone.
   */
  --bg-negative-hover: var(--colour-light-alpha-2);

  /* components */
  --bruno-logo-icon: var(--fg-accent-brand-inverted);
  --button-accent-background: var(--bg-accent-brand);
  --button-accent-label: var(--fg-accent-brand);
  --button-negative-background: var(--bg-negative);
  --button-negative-label: var(--fg-on-dark);
  --button-primary-background: var(--bg-primary);
  --button-primary-label: var(--fg-primary);
  --button-ghost-label: var(--fg-primary);
  --button-secondary-background: var(--bg-secondary);
  --button-secondary-label: var(--fg-primary);
  --button-tertiary-background: var(--bg-tertiary);
  --button-tertiary-label: var(--fg-primary);
  --button-primary-icon: var(--fg-primary);
  --button-secondary-icon: var(--fg-primary);
  --button-tertiary-icon: var(--fg-primary);
  --button-accent-icon: var(--fg-accent-brand);
  --button-negative-icon: var(--fg-on-dark);
  --button-ghost-icon: var(--fg-primary);
  --button-label-disabled: var(--fg-disabled);
  --button-icon-disabled: var(--fg-disabled);
  --button-background-disabled: var(--bg-disabled);
  --button-primary-background-active: var(--bg-accent-brand);
  --button-primary-label-active: var(--fg-accent-brand);
  --button-primary-icon-active: var(--fg-accent-brand);
  --button-secondary-background-active: var(--bg-accent-brand);
  --button-secondary-label-active: var(--fg-accent-brand);
  --button-secondary-icon-active: var(--fg-accent-brand);
  --button-tertiary-background-active: var(--bg-accent-brand);
  --button-tertiary-label-active: var(--fg-accent-brand);
  --button-tertiary-icon-active: var(--fg-accent-brand);
  --button-accent-background-active: var(--bg-accent-brand-inverted);
  --button-accent-label-active: var(--fg-accent-brand-inverted);
  --button-accent-icon-active: var(--fg-accent-brand-inverted);
  --button-negative-background-active: var(--bg-negative);
  --button-negative-label-active: var(--fg-on-dark);
  --button-negative-icon-active: var(--fg-on-dark);
  --button-ghost-label-active: var(--fg-primary);
  --button-ghost-icon-active: var(--fg-primary);
  --button-primary-background-hover: var(--bg-primary-hover);
  --button-secondary-background-hover: var(--bg-secondary-hover);
  --button-tertiary-background-hover: var(--bg-tertiary-hover);
  --button-ghost-background-hover: var(--bg-primary-hover);
  --button-accent-background-hover: var(--bg-accent-brand-hover);
  --button-negative-background-hover: var(--bg-negative-hover);
  --odds-button-background: var(--bg-tertiary);
  --odds-button-label-primary: var(--fg-primary);
  --odds-button-background-disabled: var(--bg-disabled);
  --odds-button-label-disabled: var(--fg-disabled);
  --odds-button-background-active: var(--bg-accent-brand);
  --odds-button-label-active: var(--fg-accent-brand);
  --odds-button-label-secondary: var(--fg-secondary);
  --odds-button-background-hover: var(--bg-tertiary-hover);
  --player-button-background: var(--bg-tertiary);
  --player-button-background-hover: var(--bg-tertiary-hover);
  --player-button-background-active: var(--bg-accent-brand);
  --player-button-background-disabled: var(--bg-disabled);
  --player-button-label: var(--fg-secondary);
  --player-button-label-active: var(--fg-primary);
  --player-button-label-disabled: var(--fg-disabled);
  --pill-button-primary-background: var(--bg-primary);
  --pill-button-primary-label: var(--fg-primary);
  --pill-button-primary-icon: var(--fg-primary);
  --pill-button-secondary-background: var(--bg-secondary);
  --pill-button-secondary-label: var(--fg-primary);
  --pill-button-secondary-icon: var(--fg-primary);
  --pill-button-tertiary-background: var(--bg-tertiary);
  --pill-button-tertiary-label: var(--fg-primary);
  --pill-button-tertiary-icon: var(--fg-primary);
  --pill-button-accent-background: var(--bg-accent-brand);
  --pill-button-accent-label: var(--fg-accent-brand);
  --pill-button-accent-icon: var(--fg-accent-brand);
  --pill-button-negative-background: var(--bg-negative);
  --pill-button-negative-label: var(--fg-on-dark);
  --pill-button-negative-icon: var(--fg-on-dark);
  --pill-button-ghost-label: var(--fg-primary);
  --pill-button-ghost-icon: var(--fg-primary);
  --pill-button-background-disabled: var(--bg-disabled);
  --pill-button-label-disabled: var(--fg-disabled);
  --pill-button-icon-disabled: var(--fg-disabled);
  --pill-button-primary-background-active: var(--bg-accent-brand);
  --pill-button-secondary-background-active: var(--bg-accent-brand);
  --pill-button-tertiary-background-active: var(--bg-accent-brand);
  --pill-button-primary-label-active: var(--fg-accent-brand);
  --pill-button-primary-icon-active: var(--fg-accent-brand);
  --pill-button-secondary-label-active: var(--fg-accent-brand);
  --pill-button-secondary-icon-active: var(--fg-accent-brand);
  --pill-button-tertiary-label-active: var(--fg-accent-brand);
  --pill-button-tertiary-icon-active: var(--fg-accent-brand);
  --pill-button-accent-background-active: var(--bg-accent-brand-inverted);
  --pill-button-accent-label-active: var(--fg-accent-brand-inverted);
  --pill-button-accent-icon-active: var(--fg-accent-brand-inverted);
  --pill-button-negative-background-active: var(--bg-negative);
  --pill-button-negative-label-active: var(--fg-on-dark);
  --pill-button-negative-icon-active: var(--fg-on-dark);
  --pill-button-ghost-label-active: var(--fg-primary);
  --pill-button-ghost-icon-active: var(--fg-primary);
  --pill-button-primary-background-hover: var(--bg-primary-hover);
  --pill-button-secondary-background-hover: var(--bg-secondary-hover);
  --pill-button-tertiary-background-hover: var(--bg-tertiary-hover);
  --pill-button-ghost-background-hover: var(--bg-primary-hover);
  --pill-button-accent-background-hover: var(--bg-accent-brand-hover);
  --pill-button-negative-background-hover: var(--bg-negative-hover);
  --event-header-background: var(--bg-tertiary);
  --event-header-label: var(--fg-primary);
  --card-background: var(--bg-primary);
  --card-header-background: var(--bg-tertiary);
  --card-header-label: var(--fg-primary);
  --card-footer-background: var(--bg-primary);
  --card-footer-label: var(--fg-primary);
  --card-subheader-background: var(--bg-secondary);
  --card-subheader-label: var(--fg-secondary);
  --card-subheader-gradient-start: var(--gradient-primary-start);
  --card-subheader-gradient-end: var(--gradient-primary-end);
  --circle-button-primary-background: var(--bg-primary);
  --circle-button-primary-icon: var(--fg-primary);
  --circle-button-background-disabled: var(--bg-disabled);
  --circle-button-icon-disabled: var(--fg-disabled);
  --circle-button-secondary-background: var(--bg-secondary);
  --circle-button-secondary-icon: var(--fg-primary);
  --circle-button-tertiary-background: var(--bg-tertiary);
  --circle-button-tertiary-icon: var(--fg-primary);
  --circle-button-accent-background: var(--bg-accent-brand);
  --circle-button-accent-icon: var(--fg-accent-brand);
  --circle-button-negative-background: var(--bg-negative);
  --circle-button-negative-icon: var(--fg-on-dark);
  --circle-button-ghost-icon: var(--fg-primary);
  --circle-button-primary-background-hover: var(--bg-primary-hover);
  --circle-button-secondary-background-hover: var(--bg-secondary-hover);
  --circle-button-tertiary-background-hover: var(--bg-tertiary-hover);
  --circle-button-ghost-background-hover: var(--bg-primary-hover);
  --circle-button-accent-background-hover: var(--bg-accent-brand-hover);
  --circle-button-negative-background-hover: var(--bg-negative-hover);
  --circle-button-primary-background-active: var(--bg-accent-brand);
  --circle-button-primary-icon-active: var(--fg-accent-brand);
  --circle-button-secondary-background-active: var(--bg-accent-brand);
  --circle-button-secondary-icon-active: var(--fg-accent-brand);
  --circle-button-tertiary-background-active: var(--bg-accent-brand);
  --circle-button-tertiary-icon-active: var(--fg-accent-brand);
  --circle-button-accent-background-active: var(--bg-accent-brand-inverted);
  --circle-button-accent-icon-active: var(--fg-accent-brand-inverted);
  --circle-button-negative-background-active: var(--bg-negative);
  --circle-button-negative-icon-active: var(--fg-on-dark);
  --circle-button-ghost-icon-active: var(--fg-primary);
  --link-button-primary-label: var(--fg-primary);
  --link-button-primary-icon: var(--fg-primary);
  --link-button-secondary-label: var(--fg-secondary);
  --link-button-secondary-icon: var(--fg-secondary);
  --link-button-tertiary-label: var(--fg-tertiary);
  --link-button-tertiary-icon: var(--fg-tertiary);
  --link-button-accent-label: var(--fg-accent-brand-inverted);
  --link-button-accent-icon: var(--fg-accent-brand-inverted);
  --link-button-negative-label: var(--fg-negative);
  --link-button-negative-icon: var(--fg-negative);
  --link-button-label-disabled: var(--fg-disabled);
  --link-button-icon-disabled: var(--fg-disabled);
  /* Hover: "one rung softer" — each variant steps one notch down the neutral
     foreground ladder, mirroring the Figma `components` collection verbatim.
     accent and negative alias primitives because no fg/* semantic holds those
     values; design-approved, see ds/specs/active/link-button-spec.md Decision 11. */
  --link-button-primary-label-hover: var(--fg-secondary);
  --link-button-primary-icon-hover: var(--fg-secondary);
  --link-button-secondary-label-hover: var(--fg-tertiary);
  --link-button-secondary-icon-hover: var(--fg-tertiary);
  --link-button-tertiary-label-hover: var(--fg-quaternary);
  --link-button-tertiary-icon-hover: var(--fg-quaternary);
  --link-button-accent-label-hover: var(--colour-grey-dark-4);
  --link-button-accent-icon-hover: var(--colour-grey-dark-4);
  --link-button-negative-label-hover: var(--colour-red-6);
  --link-button-negative-icon-hover: var(--colour-red-6);
  --event-row-background: var(--bg-primary);
  --event-row-label: var(--fg-primary);
  --event-row-divider: var(--border-primary);
  --match-card-background: var(--bg-primary);
  --match-card-label-primary: var(--fg-primary);
  --match-card-label-secondary: var(--fg-secondary);
  --trend-card-label-primary: var(--fg-primary);
  --trend-card-label-positive: var(--fg-accent-green);
  --trend-card-label-secondary: var(--fg-secondary);
  --trend-card-background: var(--bg-primary);
  --trend-card-divider: var(--border-secondary);
  --trend-icon-background: var(--bg-accent-green);
  --trend-icon-icon: var(--fg-on-dark);
  --trend-category-label-secondary: var(--fg-primary);
  --trend-category-label-primary: var(--fg-accent-green);
  --event-hero-label-primary: var(--fg-primary);
  --event-hero-label-secondary: var(--fg-secondary);
  --status-message-label-primary: var(--fg-primary);
  --status-message-label-secondary: var(--fg-secondary);
  --status-message-icon-negative: var(--fg-negative);
  --flag-icon-background-placeholder: var(--bg-secondary);
  --market-card-background: var(--bg-primary);
  --market-card-border: var(--border-primary);
  --team-row-label-primary: var(--fg-primary);
  --team-row-label-secondary: var(--fg-secondary);
  --team-row-icon: var(--fg-secondary);
  --team-row-background: var(--bg-primary);
  --team-row-divider: var(--border-primary);
  --market-row-label-primary: var(--fg-primary);
  --market-row-label-secondary: var(--fg-secondary);
  --market-row-icon: var(--fg-secondary);
  --market-row-background: var(--bg-primary);
  --market-row-border: var(--border-primary);
  --market-row-gradient-start: var(--gradient-primary-start);
  --market-row-gradient-end: var(--gradient-primary-end);
  --fav-button-icon-primary: var(--fg-quaternary);
  --fav-button-icon-hover: var(--fg-tertiary);
  --fav-button-icon-active: var(--fg-accent-yellow);
  --fav-button-icon-disabled: var(--fg-disabled);
  --stats-button-icon-primary: var(--fg-quaternary);
  --stats-button-icon-hover: var(--fg-tertiary);
  --stats-button-icon-active: var(--fg-accent-green);
  --stats-button-icon-disabled: var(--fg-disabled);
  --scanner-card-background: var(--bg-primary);
  --feature-row-label: var(--fg-primary);
  --feature-row-icon: var(--fg-primary);
  --bar-chart-chart-won-axis: var(--fg-chart-positive);
  --bar-chart-chart-won-label: var(--fg-chart-positive);
  --bar-chart-chart-lost-axis: var(--fg-chart-negative);
  --bar-chart-chart-lost-label: var(--fg-secondary);
  --dial-chart-dial-primary: var(--fg-chart-positive);
  --dial-chart-label-primary: var(--fg-primary);
  --dial-chart-dial-on-light: var(--fg-on-light);
  --dial-chart-label-on-light: var(--fg-on-light);
  --grid-chart-cell-won: var(--bg-chart-positive);
  --grid-chart-cell-lost: var(--bg-chart-negative);
  --grid-chart-cell-yellow-card: var(--bg-accent-yellow);
  --grid-chart-cell-red-card: var(--bg-accent-red);
  --grid-chart-label-on-won: var(--fg-on-dark);
  --grid-chart-label-on-lost: var(--fg-secondary);
  --grid-chart-icon-on-won: var(--fg-on-dark);
  --grid-chart-icon-on-lost: var(--fg-secondary);
  --grid-chart-icon-on-card: var(--fg-on-dark);
  --decrement-button-icon-primary: var(--fg-primary);
  --decrement-button-icon-hover: var(--fg-secondary);
  --decrement-button-icon-disabled: var(--fg-disabled);
  --increment-button-icon-primary: var(--fg-primary);
  --increment-button-icon-hover: var(--fg-secondary);
  --increment-button-icon-disabled: var(--fg-disabled);
  --number-stepper-background: var(--bg-primary);
  --number-stepper-value: var(--fg-primary);
  --quick-picks-nav-background: var(--bg-primary);
  --quick-picks-nav-border: var(--border-primary);
  --quick-picks-card-background: var(--bg-primary);
  --quick-picks-card-border: var(--border-secondary);
  --quick-picks-card-background-pattern-primary: var(--bg-accent-light-green);
  --quick-picks-card-background-pattern-secondary: var(--bg-page);
  --quick-picks-card-stat-gradient-start: var(--gradient-stat-start);
  --quick-picks-card-stat-gradient-end: var(--gradient-stat-end);
  --quick-picks-card-stat-label: var(--fg-on-light);
  --quick-picks-card-stat-icon: var(--fg-on-light);
  --quick-picks-card-insight-gradient-start: var(--gradient-secondary-start);
  --quick-picks-card-insight-gradient-end: var(--gradient-secondary-end);
  --quick-picks-card-insight-label: var(--fg-primary);
  --quick-picks-card-team-label: var(--fg-primary);
  --quick-picks-card-market-label: var(--fg-primary);
  --quick-picks-card-selection-label: var(--fg-primary);
  --quick-picks-card-odds-label: var(--fg-primary);
  --team-lineup-background: var(--bg-primary);
  --team-lineup-outline: var(--border-secondary);

  /* text styles */
  --text-style-heading-2xl-font-family: var(--typography-font-family-sans);
  --text-style-heading-2xl-font-weight: 700;
  --text-style-heading-2xl-font-size: 48px;
  --text-style-heading-2xl-line-height: 48px;
  --text-style-heading-2xl-letter-spacing: 0;
  --text-style-heading-xl-font-family: var(--typography-font-family-sans);
  --text-style-heading-xl-font-weight: 700;
  --text-style-heading-xl-font-size: 30px;
  --text-style-heading-xl-line-height: 48px;
  --text-style-heading-xl-letter-spacing: 0;
  --text-style-heading-lg-font-family: var(--typography-font-family-sans);
  --text-style-heading-lg-font-weight: 700;
  --text-style-heading-lg-font-size: 24px;
  --text-style-heading-lg-line-height: 40px;
  --text-style-heading-lg-letter-spacing: 0;
  --text-style-heading-md-font-family: var(--typography-font-family-sans);
  --text-style-heading-md-font-weight: 700;
  --text-style-heading-md-font-size: 20px;
  --text-style-heading-md-line-height: 32px;
  --text-style-heading-md-letter-spacing: 0;
  --text-style-heading-sm-font-family: var(--typography-font-family-sans);
  --text-style-heading-sm-font-weight: 700;
  --text-style-heading-sm-font-size: 18px;
  --text-style-heading-sm-line-height: 28px;
  --text-style-heading-sm-letter-spacing: 0;
  --text-style-title-lg-font-family: var(--typography-font-family-sans);
  --text-style-title-lg-font-weight: 700;
  --text-style-title-lg-font-size: 16px;
  --text-style-title-lg-line-height: 24px;
  --text-style-title-lg-letter-spacing: 0;
  --text-style-title-md-font-family: var(--typography-font-family-sans);
  --text-style-title-md-font-weight: 700;
  --text-style-title-md-font-size: 14px;
  --text-style-title-md-line-height: 20px;
  --text-style-title-md-letter-spacing: 0;
  --text-style-title-sm-font-family: var(--typography-font-family-sans);
  --text-style-title-sm-font-weight: 700;
  --text-style-title-sm-font-size: 12px;
  --text-style-title-sm-line-height: 16px;
  --text-style-title-sm-letter-spacing: 0;
  --text-style-title-xs-font-family: var(--typography-font-family-sans);
  --text-style-title-xs-font-weight: 700;
  --text-style-title-xs-font-size: 10px;
  --text-style-title-xs-line-height: 12px;
  --text-style-title-xs-letter-spacing: 0;
  --text-style-body-xl-font-family: var(--typography-font-family-sans);
  --text-style-body-xl-font-weight: 500;
  --text-style-body-xl-font-size: 18px;
  --text-style-body-xl-line-height: 28px;
  --text-style-body-xl-letter-spacing: 0;
  --text-style-body-lg-font-family: var(--typography-font-family-sans);
  --text-style-body-lg-font-weight: 500;
  --text-style-body-lg-font-size: 16px;
  --text-style-body-lg-line-height: 24px;
  --text-style-body-lg-letter-spacing: 0;
  --text-style-body-md-font-family: var(--typography-font-family-sans);
  --text-style-body-md-font-weight: 500;
  --text-style-body-md-font-size: 14px;
  --text-style-body-md-line-height: 20px;
  --text-style-body-md-letter-spacing: 0;
  --text-style-body-sm-font-family: var(--typography-font-family-sans);
  --text-style-body-sm-font-weight: 500;
  --text-style-body-sm-font-size: 12px;
  --text-style-body-sm-line-height: 16px;
  --text-style-body-sm-letter-spacing: 0;
  --text-style-body-xs-font-family: var(--typography-font-family-sans);
  --text-style-body-xs-font-weight: 500;
  --text-style-body-xs-font-size: 10px;
  --text-style-body-xs-line-height: 12px;
  --text-style-body-xs-letter-spacing: 0;
}

:root[data-theme='dark'],
:host([data-theme='dark']) {
  /* theme: Dark */
  --bg-primary: var(--colour-grey-dark-1);
  --bg-secondary: var(--colour-grey-dark-2);
  --bg-accent-brand: var(--colour-white);
  --bg-positive-primary: var(--colour-green-7);
  --border-primary: var(--colour-grey-dark-2);
  --border-secondary: var(--colour-grey-dark-3);
  --bg-page: var(--colour-black);
  --fg-positive: var(--colour-green-7);
  --fg-primary: var(--colour-grey-dark-12);
  --fg-secondary: var(--colour-grey-dark-11);
  --border-positive: var(--colour-green-7);
  --border-accent: var(--colour-white);
  --bg-negative: var(--colour-red-7);
  --border-negative: var(--colour-red-7);
  --fg-negative: var(--colour-red-7);
  --bg-disabled: var(--colour-grey-dark-3);
  --fg-disabled: var(--colour-grey-dark-8);
  --bg-tertiary: var(--colour-grey-dark-3);
  --bg-quaternary: var(--colour-grey-dark-4);
  --border-tertiary: var(--colour-grey-dark-4);
  --fg-accent-brand: var(--colour-black);
  --fg-on-dark: var(--colour-white);
  --fg-accent-brand-inverted: var(--colour-white);
  --bg-accent-brand-inverted: var(--colour-black);
  --border-accent-inverted: var(--colour-black);
  --fg-tertiary: var(--colour-grey-dark-10);
  --fg-on-light: var(--colour-black);
  --bg-on-dark: var(--colour-white);
  --bg-positive-secondary: var(--colour-green-9);
  --fg-accent-yellow: var(--colour-amber-6);
  --fg-accent-red: var(--colour-red-7);
  --bg-accent-yellow: var(--colour-amber-6);
  --bg-accent-red: var(--colour-red-7);
  --bg-chart-positive: var(--colour-green-7);
  --gradient-primary-start: var(--colour-dark-alpha-8);
  --gradient-primary-end: var(--colour-dark-alpha-0);
  --gradient-stat-start: var(--colour-green-8);
  --gradient-stat-end: var(--colour-green-6);
  --gradient-secondary-start: var(--colour-black);
  --gradient-secondary-end: var(--colour-dark-alpha-0);
  --bg-accent-light-green: var(--colour-green-5);
  --bg-on-light: var(--colour-black);
  --bg-chart-negative: var(--colour-grey-dark-3);
  --fg-chart-positive: var(--colour-green-7);
  --fg-chart-negative: var(--colour-grey-dark-3);
  --fg-quaternary: var(--colour-grey-dark-10);
  --fg-accent-green: var(--colour-green-7);
  --bg-accent-green: var(--colour-green-7);
  --focus-ring-colour: var(--colour-white);
  /* hover overlays flip polarity: light overlay on dark surfaces; accent surface inverts to white, so it darkens */
  --bg-primary-hover: var(--colour-light-alpha-1);
  --bg-secondary-hover: var(--colour-light-alpha-1);
  --bg-tertiary-hover: var(--colour-light-alpha-1);
  --bg-accent-brand-hover: var(--colour-dark-alpha-1);
  /* negative resolves to the same overlay in both themes (red surface stays dark), but set explicitly so a future dark-mode change has a home */
  --bg-negative-hover: var(--colour-light-alpha-2);

}