/* BALLKNW design tokens: the one place brand values are defined.
   Loaded on every page before any other stylesheet. Page stylesheets keep their
   own short names (--lime, --muted, --ink …) but point them here, so a colour,
   radius or type step is changed once, in this file.

   Identity: a floodlit-pitch palette. Green is Gaffa, the main game, and every
   primary action. Gold marks the quick games (daily and draft challenges), so a
   two-minute puzzle never reads as the flagship. Oswald for display, Inter for
   reading, matching the game itself.

   Breakpoints (media queries cannot read custom properties, so they are listed
   here and used as literals): 480px small phone+, 720px tablet, 960px desktop,
   1200px wide. Design from 320px up. */
:root{
  /* surfaces, darkest to lightest */
  --bk-bg:#040a06;
  --bk-bg-2:#07120b;
  --bk-surface:#0a160e;
  --bk-surface-2:#0f1d14;
  --bk-field-2:#08150d;   /* striped section bands, with --bk-bg-2 */
  --bk-surface-3:#0a1a10; /* feature strips */
  --bk-surface-4:#0d2316; /* hub card gradient start */
  --bk-overlay:rgba(7,16,10,.88);

  /* lines */
  --bk-line:rgba(255,255,255,.08);
  --bk-line-strong:rgba(255,255,255,.18);
  --bk-line-green:rgba(61,220,90,.22);

  /* text */
  --bk-ink:#eef3ec;
  --bk-ink-2:rgba(238,243,236,.86);
  --bk-muted:#9aab9f;   /* 7.4:1 on --bk-bg; the floor for body-size grey text */

  /* brand and roles */
  --bk-green:#34b552;      /* Gaffa, primary actions */
  --bk-green-hi:#8fcf57;   /* accent text and links on dark */
  --bk-green-grad:linear-gradient(180deg,#3fbf5c 0%,#1f9a42 100%);
  --bk-on-green:#03140a;
  --bk-gold:#e0b84a;       /* quick games */
  --bk-gold-line:rgba(224,184,74,.4);
  --bk-gold-soft:rgba(224,184,74,.16);
  --bk-danger:#ff6b6b;
  --bk-danger-soft:#ff9c9f; /* hard-difficulty text on dark */
  --bk-ease-out:cubic-bezier(.23,1,.32,1); /* entrances and expanders */
  --bk-discord:#8b95ff;

  /* type */
  --bk-font-display:'Oswald',Impact,'Arial Narrow',sans-serif;
  --bk-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --bk-fs-xs:12px;   /* uppercase labels */
  --bk-fs-sm:14px;   /* meta, card descriptions */
  --bk-fs-md:16px;   /* body */
  --bk-fs-lg:18px;   /* card titles, lead */
  --bk-fs-xl:20px;
  --bk-fs-h3:clamp(1.25rem,3vw,1.5rem);
  --bk-fs-h2:clamp(2rem,5.5vw,3.1rem);
  --bk-fs-h1:clamp(2.5rem,10vw,4.6rem);
  --bk-lh-tight:1.02;
  --bk-lh-snug:1.3;
  --bk-lh-body:1.55;
  --bk-track-label:.14em;

  /* spacing */
  --bk-sp-1:4px; --bk-sp-2:8px; --bk-sp-3:12px; --bk-sp-4:16px;
  --bk-sp-5:24px; --bk-sp-6:32px; --bk-sp-7:48px; --bk-sp-8:72px;

  /* shape */
  --bk-r-sm:10px;  /* chips, rows, small controls */
  --bk-r-md:16px;  /* cards, tiles, buttons */
  --bk-r-lg:22px;  /* feature panels */
  --bk-r-pill:999px;
  --bk-border:1px;

  /* elevation */
  --bk-shadow-1:0 6px 18px rgba(0,0,0,.35);
  --bk-shadow-2:0 20px 50px rgba(0,0,0,.55);
  --bk-glow:0 0 0 1px rgba(61,220,90,.18),0 10px 30px rgba(0,0,0,.45);

  /* layout */
  --bk-maxw:1180px;
  --bk-gutter:16px;    /* 28px from 720px, set below */
  --bk-measure:68ch;

  /* interaction */
  --bk-focus:2px solid var(--bk-green-hi);
  --bk-focus-offset:3px;
  --bk-tap:44px;       /* minimum touch target */
  --bk-ease:.15s cubic-bezier(.23,1,.32,1);
}
@media(min-width:720px){:root{--bk-gutter:28px}}

/* ── Interaction foundations, every page ──────────────────────────────────
   Zero specificity (:where), so any page's own rule wins. Apple-style basics:
   feedback the instant a finger lands, no grey tap flash, and honour the
   reduced-transparency and higher-contrast settings as well as reduced motion.
   `scale` composes with any transform a page already sets, so hover lifts and
   press feedback don't fight. */
:where(html){-webkit-tap-highlight-color:transparent}
:where(button,.btn,a.btn,[role="button"],a.next,.sn-cta,.sn-auth,.sn-burger,input[type="submit"],input[type="button"]){
  transition:scale .1s ease-out}
:where(button,.btn,a.btn,[role="button"],a.next,.sn-cta,.sn-auth,.sn-burger,input[type="submit"],input[type="button"]):where(:active:not(:disabled)){
  scale:.97}
@media(prefers-reduced-motion:reduce){
  :where(button,.btn,a.btn,[role="button"],a.next,.sn-cta,.sn-auth,.sn-burger,input[type="submit"],input[type="button"]):active{scale:1}
}
@media(prefers-reduced-transparency:reduce){
  :root{--bk-overlay:#07100a}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media(prefers-contrast:more){
  :root{--bk-line:rgba(255,255,255,.32);--bk-line-strong:rgba(255,255,255,.5);--bk-line-green:rgba(61,220,90,.6);--bk-muted:#c9d3cc;--bk-ink-2:#e6ece7}
}