/* xf-tokens.css  v2  (15 Oct 2026, uniform round, RATIFIED by Nova: notes/NOVA-REVIEW-uniform.md, rulings D1 to D17)
   v2 changes: D14 dark-ground disabled state; compact controls keep a 44px hit area (6.10 touch floor); .xf-link (plain-type action, not a bordered box). Every DISPUTED
   tag below is now a ruling; "Nova D#" names the line of the review that settled it. D5 amends Brand Guide 6.3 (owner call, logged in the guide at next revision).
   ONE shared stylesheet for the shape and skin of every UI component on play.xfclubs.com, written so xfclubs.com can adopt it as it stands.
   Sources: Brand Guide 2.0 (XF Marketing/identity-2/XF-BRAND-GUIDE-2.0.md section 6.3 buttons, 6.5 cards, 6.7 motion, 8 tokens) and the live xfclubs.com
   homepage (:root, .btn, .btn-primary, .btn-ghost, .card, header.nav--bare). Every value below carries its source. Where the guide and the main site
   disagree, the value is a single token, marked DISPUTED, so one ruling is one edit. Where a rule is not in either, it says PROPOSED.
   Pages never write a radius, border, padding, height, font size or hairline colour for a component of their own: they take a class from here, or, for an
   element a script owns, the same var(). tools/component-check.cjs fails the build on any value outside this set. NOT in scope: layout, display type,
   game artwork (Circuit board and tiles, Stacker cabinet and canvas), the TV page's 10-foot type scale. */

:root{
  /* ---- colour: Brand Guide 2.0 section 2, tokens.css; main site :root ---- */
  --xf-green:#00B62E;          /* guide Stadium Green; main --green */
  --xf-green-hover:#009E28;    /* guide 6.3 hover; main --green-hover */
  --xf-green-press:#009526;    /* guide 6.3 active (main site has no press state) */
  --xf-black:#0A0A0A;          /* guide / main --black */
  --xf-off:#F5F5F3;            /* guide / main --off */
  --xf-white:#FFFFFF;
  --xf-g100:#E9E9E7;           /* disabled ground, guide 6.3 */
  --xf-g200:#C7C7C5;           /* focus ring on dark, guide 6.3; main --g200 */
  --xf-g300:#8E8E8C;           /* disabled text, guide 6.3; main --g300 */
  --xf-g400:#55554F;
  --xf-g500:#1C1C1A;           /* card and field ground on dark, guide 6.5 / form field; main --g500. RULED Nova D10: flat, no shadow. Also the dark-ground disabled ground (D14) */
  --xf-ink-hover:#262626;      /* PROPOSED: hover of the black button on a light band (the games landing's own value) */
  --xf-scrim:rgba(10,10,10,.92);

  /* ---- lines ---- */
  --xf-hair:rgba(255,255,255,.12);   /* hairline on dark (Nova: hairline stays for CONTAINERS only): guide tokens.css --hairline-dark; main --hair. Containers and dividers. */
  --xf-edge:#8E8E8C;                 /* RULED Nova D5: #8E8E8C for every secondary button, input and chip. Guide 6.10 accessibility floor beats the 6.3 "hairline outline"; Nova amends 6.3. The edge of an interactive control (secondary button, input, chip). Guide 6.3 says "hairline outline",
                                        main .btn-ghost uses rgba(255,255,255,.20). Both are under the 3:1 WCAG 1.4.11 needs for a control boundary on
                                        #0A0A0A (hairline 1.3:1, .20 about 1.8:1). #8E8E8C is 6:1 and is what Circuit shipped on 11 Oct. */

  /* ---- shape: guide section 8 "one radius pair", main :root --radius / --radius-card ---- */
  --xf-radius:4px;             /* buttons, inputs, chips, tags */
  --xf-radius-card:8px;        /* cards, panels, modals, image frames */

  /* ---- type ---- */
  --xf-font:"InterV","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;   /* main --body */
  --xf-label-weight:600;       /* RULED Nova D4: 600 (guide Register 03 and 6.3); 700 on main inner pages is drift */
  --xf-btn-size:15px;          /* RULED Nova D1: 15px, guide 6.3; main homepage 14px and inner pages 12.5/13px are drift. Was: guide 6.3 15px; main homepage .btn 14px (key-workers and students pages use 12.5px and 13px at weight 700) */
  --xf-btn-track:.08em;        /* guide 6.3 and main --track-label */
  --xf-tag-size:12px;          /* guide 6.4 OFFER tag: Register 03 12px */
  --xf-tag-track:.10em;        /* guide 6.4: +0.10em */
  --xf-input-size:16px;        /* RULED Nova D8: 16px is the sanctioned field size (guide 17px is a body-voice value). Was: guide Register 02 is 17px, main join form 15px. 16px is the floor that stops iOS zooming the page on focus (Experience room, 7 Sep). */

  /* ---- size and space ---- */
  --xf-btn-h:52px;             /* RULED Nova D3: 52px, 48px under 600px (guide 6.3) */
  --xf-btn-pad:0 32px;         /* RULED Nova D2: 0 32px (guide 6.3: the button grows, never shrinks); 0 16px is the tight modifier for paired buttons */
  --xf-btn-pad-tight:0 16px;   /* RULED Nova D2 (tight modifier): two buttons side by side, or a label that cannot wrap; main homepage .btn padding */
  --xf-btn-h-compact:40px;     /* main header button, min-height 40px, 13px, padding 0 18px (the 15 Oct header sync). RULED Nova (b): the 40px LOOK stays, the HIT AREA is 44px (guide 6.10), see .xf-btn--compact::after */
  --xf-hit:44px;               /* minimum touch target, guide 6.10 */
  --xf-btn-size-compact:13px;
  --xf-btn-pad-snug:0 8px;     /* compact button, snug: a header with two toggles beside a wordmark at 375px (Sound off + Buzz off). On the 8px scale. */
  --xf-btn-pad-compact:0 18px;
  --xf-field-h:48px;           /* main /join/ field height 48px; guide button mobile height 48px */
  --xf-field-pad:0 16px;       /* PROPOSED, on the 8px scale (guide section 8: no spacing off the 8px scale) */
  --xf-chip-h:48px;            /* RULED Nova D12: chip ratified as a component (48px, 14px 600, sentence case, selected = filled off-white). Only for choosing an option or a toggle state, NEVER an action; actions are UPPERCASE buttons */
  --xf-chip-pad:8px 16px;
  --xf-tag-pad:4px 8px;       /* RULED Nova D11: 12px, +0.10em, Register 03, 4px radius */
  --xf-card-pad:16px;          /* RULED Nova D9: 16px, 24px from 601px, both on the 8px scale. Was: the guide does not give a card padding; 16 on phones, 24 from 601px; main .card__actions is 20px 24px 24px */
  --xf-box:24px;               /* checkbox */

  /* ---- motion: guide 6.7 ---- */
  --xf-ease:cubic-bezier(.4,0,.2,1);
  --xf-t:200ms var(--xf-ease);
  --xf-ring:2px solid var(--xf-g200);   /* RULED Nova D15: guide 6.3 focus-visible: 2px grey-200 on dark, 2px offset, never green */
}
@media (max-width:600px){ :root{ --xf-btn-h:48px; } }          /* guide 6.3: 48px on mobile */
@media (min-width:601px){ :root{ --xf-card-pad:24px; } }
@media (prefers-reduced-motion:reduce){ :root{ --xf-t:0ms linear; } }

/* ---- focus: one ring everywhere ---- */
.xf-btn:focus-visible,.xf-chip:focus-visible,.xf-input:focus-visible,.xf-link:focus-visible{outline:var(--xf-ring);outline-offset:2px;}
.xf-on-light .xf-btn:focus-visible,.xf-on-light .xf-chip:focus-visible{outline-color:var(--xf-black);}

/* ================= BUTTON ================= guide 6.3 */
.xf-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:var(--xf-btn-h);padding:var(--xf-btn-pad);
  font-family:var(--xf-font);font-size:var(--xf-btn-size);font-weight:var(--xf-label-weight);font-style:normal;line-height:1.02;letter-spacing:var(--xf-btn-track);text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;border-radius:var(--xf-radius);cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background var(--xf-t),color var(--xf-t),border-color var(--xf-t);}
.xf-btn--primary{background:var(--xf-green);color:var(--xf-black);border-color:var(--xf-green);}
.xf-btn--primary:hover{background:var(--xf-green-hover);border-color:var(--xf-green-hover);}
.xf-btn--primary:active{background:var(--xf-green-press);border-color:var(--xf-green-press);}
/* light: the off-white button on a black ground, for the second CTA on a page that already has its one green (Brand Guide 2.3 ration) */
.xf-btn--light{background:var(--xf-off);color:var(--xf-black);border-color:var(--xf-off);}
.xf-btn--light:hover{background:var(--xf-white);border-color:var(--xf-white);}
/* ink: the black button on a light band */
.xf-btn--ink{background:var(--xf-black);color:var(--xf-off);border-color:var(--xf-black);}
.xf-btn--ink:hover{background:var(--xf-ink-hover);border-color:var(--xf-ink-hover);}
/* RULED Nova D6 and D7: secondary hover = off-white border plus inset 1px ring (reads 2px, no layout shift); primary hover #009E28, press #009526. */
/* secondary: outline. Hover thickens the line to 2px as the guide says, with an inset ring so nothing moves by a pixel. */
.xf-btn--secondary{background:transparent;color:var(--xf-off);border-color:var(--xf-edge);transition:background var(--xf-t),color var(--xf-t),border-color var(--xf-t),box-shadow var(--xf-t);}
.xf-btn--secondary:hover{border-color:var(--xf-off);box-shadow:inset 0 0 0 1px var(--xf-off);}
.xf-on-light .xf-btn--secondary{color:var(--xf-black);border-color:var(--xf-black);}
.xf-on-light .xf-btn--secondary:hover{box-shadow:inset 0 0 0 1px var(--xf-black);}
.xf-btn--tight{padding:var(--xf-btn-pad-tight);}
.xf-btn--compact{min-height:var(--xf-btn-h-compact);font-size:var(--xf-btn-size-compact);padding:var(--xf-btn-pad-compact);line-height:1.7;}   /* line-height as the main header button inherits it */
.xf-btn--snug{padding:var(--xf-btn-pad-snug);white-space:nowrap;}
/* RULED Nova (a): a toggle that PERFORMS an action (Sound, Buzz) is a compact UPPERCASE button, state in the label, aria-pressed kept. Pressed = off-white edge. */
.xf-btn[aria-pressed="true"].xf-btn--secondary{border-color:var(--xf-off);}
/* RULED Nova (b) and 6.10: every compact control keeps its 40px look but gets a 44px minimum hit area (a transparent pseudo-element, so layout does not move). */
.xf-btn--compact,.xf-chip--compact{position:relative;}
.xf-btn--compact::after,.xf-chip--compact::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--xf-hit);transform:translateY(-50%);}
/* DISABLED. RULED Nova D14: on a dark ground (the default here) ground #1C1C1A, text #8E8E8C, hairline border: a pale slab on black would read as the MOST active control. On a light band the guide 6.3 state stands (grey-100 ground, grey-300 text). */
.xf-btn:disabled,.xf-btn[disabled]{background:var(--xf-g500);color:var(--xf-g300);border-color:var(--xf-hair);box-shadow:none;cursor:not-allowed;}
.xf-on-light .xf-btn:disabled,.xf-on-light .xf-btn[disabled]{background:var(--xf-g100);color:var(--xf-g300);border-color:var(--xf-g100);}
/* LINK: an action set as plain type (no box). RULED Nova (e): not a bordered control. 44px tall hit area. */
.xf-link{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:var(--xf-hit);padding:0 8px;background:none;border:0;border-radius:0;
  font-family:var(--xf-font);font-size:14px;font-weight:var(--xf-label-weight);color:var(--xf-off);text-decoration:underline;text-underline-offset:3px;cursor:pointer;-webkit-appearance:none;appearance:none;}
.xf-link:hover{color:var(--xf-white);}
.xf-link:focus-visible{outline:var(--xf-ring);outline-offset:2px;}

/* ================= CHIP ================= an option or a toggle: a tab, a club pick, Sound on/off. Sentence case, selected = filled off-white. */
.xf-chip{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:var(--xf-chip-h);padding:var(--xf-chip-pad);
  font-family:var(--xf-font);font-size:14px;font-weight:var(--xf-label-weight);line-height:1.25;letter-spacing:0;text-transform:none;
  background:transparent;color:var(--xf-off);border:1px solid var(--xf-edge);border-radius:var(--xf-radius);cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background var(--xf-t),color var(--xf-t),border-color var(--xf-t);}
.xf-chip:hover{border-color:var(--xf-off);}
.xf-chip[aria-pressed="true"]{background:var(--xf-off);color:var(--xf-black);border-color:var(--xf-off);}

/* compact chip: kept for a header VALUE choice if one is ever needed; Sound and Buzz are actions and use .xf-btn--compact since Nova (a). Same 40px / 13px as the compact button. */
.xf-chip--compact{min-height:var(--xf-btn-h-compact);padding:var(--xf-btn-pad-compact);font-size:var(--xf-btn-size-compact);}

/* ================= TAG ================= guide 6.4: Register 03, 12px, +0.10em */
.xf-tag{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  padding:var(--xf-tag-pad);
  font-family:var(--xf-font);font-size:var(--xf-tag-size);font-weight:var(--xf-label-weight);line-height:1.3;letter-spacing:var(--xf-tag-track);text-transform:uppercase;
  background:var(--xf-black);color:var(--xf-off);border:1px solid var(--xf-edge);border-radius:var(--xf-radius);}

/* ================= INPUT ================= */
.xf-input{box-sizing:border-box;display:block;width:100%;min-height:var(--xf-field-h);padding:var(--xf-field-pad);
  font-family:var(--xf-font);font-size:var(--xf-input-size);font-weight:400;line-height:1.4;letter-spacing:0;
  background:var(--xf-g500);color:var(--xf-off);border:1px solid var(--xf-edge);border-radius:var(--xf-radius);-webkit-appearance:none;appearance:none;
  transition:border-color var(--xf-t);}
.xf-input::placeholder{color:var(--xf-g300);opacity:1;}
.xf-input:hover,.xf-input:focus{border-color:var(--xf-off);}
.xf-input:focus{outline:none;}
.xf-input:focus-visible{outline:var(--xf-ring);outline-offset:2px;}
.xf-check{width:var(--xf-box);height:var(--xf-box);flex:none;margin:0;accent-color:var(--xf-off);}

/* ================= CARD / PANEL / MODAL PANEL / NOTICE ================= guide 6.5: 8px, hairline, flat */
.xf-card{box-sizing:border-box;background:var(--xf-g500);color:var(--xf-off);border:1px solid var(--xf-hair);border-radius:var(--xf-radius-card);padding:var(--xf-card-pad);box-shadow:none;}
/* RULED Nova D16: the landing club-line panel is a plain card, the green rule is gone (guide 6.5, 2.3 ration). RULED D17: the TV LIVE tag takes tag tokens, 4px, never a pill; the 10-foot type scale stays exempt. */
/* IMAGE FRAME (RULED Nova D13): an image that sits inside the page's measure (a thumbnail, a QR plate): 8px radius, hairline. Full-bleed art has no frame. Main figure.odshot 4px aligns to 8 when xfclubs.com adopts the file. */
.xf-frame{display:block;box-sizing:border-box;overflow:hidden;border:1px solid var(--xf-hair);border-radius:var(--xf-radius-card);}
img.xf-frame{object-fit:cover;background:var(--xf-g500);}
/* SCRIM behind a modal */
.xf-scrim{background:var(--xf-scrim);}