/* golf · dark
   Apply by setting data-brand + data-kind on :root, or copy these into a global rule.
   This file imports the shared (brand-agnostic) token spec from
   ../_global.css — only color + shadow tokens diverge per brand. */
@import url("../_global.css");

:root[data-brand="golf"][data-kind="dark"] {
  color-scheme: dark;
  --color-bg: #0B2014;
  --color-surface: #112B1C;
  --color-surface-hover: #183A26;
  --color-fg: #F2F0E3;
  --color-fg-muted: #B6C1B0;
  --color-fg-subtle: #7C8C7C;
  --color-border: #234731;
  --color-border-strong: #3F674F;
  --color-primary: #4CBA77;
  --color-primary-fg: #0B2014;
  --color-primary-hover: #6CCC92;
  --color-accent: #E0BA5E;
  --color-accent-fg: #0B2014;
  --color-success: #4CBA77;
  --color-success-fg: #0B2014;
  --color-warning: #E0BA5E;
  --color-warning-fg: #0B2014;
  --color-danger: #D27474;
  --color-danger-fg: #0B2014;
  --color-info: #6FB6CC;
  --color-focus-ring: #4CBA77;
  --shadow-sm: 0px 1px 4px -2px rgba(0, 0, 0, 0.50);
  --shadow-md: 0px 8px 28px -6px rgba(0, 0, 0, 0.60);
  /* Responsive breakpoint tokens (em-based per MDN guidance so they track user
     zoom). CSS custom properties cannot be used inside @media conditions —
     these are the CANONICAL values consumed by the canvas renderer via
     matchMedia (scenegraph.js) and mirrored in tokens.*.json; keep all three
     in sync. xl is everything above --bp-lg. */
  --bp-xs: 30em;
  --bp-sm: 36em;
  --bp-md: 48em;
  --bp-lg: 64em;
}