/* Snooker Career Champion design tokens — copied from the SCS repo, Design/system/tokens. Keep in sync by hand. */
@font-face { font-family: "Barlow"; src: url("/assets/fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/Barlow-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  /* Baize — table cloth greens, from felt to the dark of an arena */
  --baize-950: #04110B;
  --baize-900: #071A12;
  --baize-850: #0B2419;
  --baize-800: #0F2E20;
  --baize-700: #154130;
  --baize-600: #1B5A40;
  --baize-500: #1F7A52;
  --baize-400: #3A9A6E;
  --baize-300: #7CC3A0;

  /* Ivory — cue ball, chalk, scoreboard type */
  --ivory-50: #FBF8F0;
  --ivory-100: #F3EEDF;
  --ivory-200: #E4DDC8;
  --ivory-300: #C9C1A8;
  --sage-400: #A8BBB1;
  --sage-500: #71877C;
  --sage-600: #4B5F56;
  --ink-900: #0B1A14;

  /* Brass — trophies, rank, premium. Mahogany — cushions & wood rails */
  --brass-300: #E8CF8E;
  --brass-500: #C9A24E;
  --brass-700: #8C6B2A;
  --mahogany-900: #2A120B;
  --mahogany-700: #4A2215;
  --mahogany-500: #7A3B22;

  /* Ball colours — also the points ladder 1→7 */
  --ball-red: #C8102E;
  --ball-yellow: #F2BE22;
  --ball-green: #13874B;
  --ball-brown: #7B4A2B;
  --ball-blue: #1D5BC4;
  --ball-pink: #EE8FB0;
  --ball-black: #141414;
  --ball-cue: #F6F2E6;

  /* Status */
  --status-success: #3FBF7F;
  --status-danger: #E5484D;
  --status-warning: #F2BE22;
  --status-info: #5B9BEA;

  /* Semantic — dark (default, in-app & arena) */
  --bg-app: var(--baize-950);
  --surface-1: var(--baize-900);
  --surface-2: var(--baize-850);
  --surface-3: var(--baize-800);
  --surface-felt: var(--baize-500);
  --surface-wood: var(--mahogany-700);
  --surface-overlay: rgba(2, 10, 6, 0.72);

  --border-subtle: rgba(243, 238, 223, 0.08);
  --border-default: rgba(243, 238, 223, 0.14);
  --border-strong: rgba(243, 238, 223, 0.28);

  --text-primary: var(--ivory-100);
  --text-secondary: var(--sage-400);
  --text-tertiary: var(--sage-500);
  --text-inverse: var(--ink-900);
  --text-on-accent: #1A1406;
  --text-on-felt: var(--ivory-50);

  --accent: var(--brass-500);
  --accent-hover: var(--brass-300);
  --accent-pressed: var(--brass-700);
  --accent-soft: rgba(201, 162, 78, 0.16);

  --felt: var(--baize-500);
  --felt-bright: var(--baize-400);
  --felt-soft: rgba(58, 154, 110, 0.18);

  --success-soft: rgba(63, 191, 127, 0.16);
  --danger-soft: rgba(229, 72, 77, 0.16);
  --warning-soft: rgba(242, 190, 34, 0.16);
  --info-soft: rgba(91, 155, 234, 0.16);

  --focus-ring: var(--brass-300);
}

/* Light theme — website, press kit, printed material */
[data-theme="light"] {
  --bg-app: var(--ivory-50);
  --surface-1: #FFFFFF;
  --surface-2: var(--ivory-100);
  --surface-3: var(--ivory-200);
  --surface-overlay: rgba(11, 26, 20, 0.5);
  --border-subtle: rgba(11, 26, 20, 0.08);
  --border-default: rgba(11, 26, 20, 0.14);
  --border-strong: rgba(11, 26, 20, 0.3);
  --text-primary: var(--ink-900);
  --text-secondary: #46594F;
  --text-tertiary: #6B7D73;
  --text-inverse: var(--ivory-100);
  --accent: var(--brass-700);
  --accent-hover: #73561F;
  --accent-pressed: #5E4618;
  --accent-soft: rgba(140, 107, 42, 0.12);
  --felt: var(--baize-600);
  --felt-bright: var(--baize-500);
  --focus-ring: var(--brass-700);
}
:root {
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-ui: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Display — Barlow Condensed, uppercase, tight */
  --text-display-xl: 56px;  --lh-display-xl: 0.95;
  --text-display-l: 40px;   --lh-display-l: 1;
  --text-display-m: 30px;   --lh-display-m: 1.05;
  --text-display-s: 22px;   --lh-display-s: 1.1;
  --tracking-display: 0.01em;

  /* Score numerals — Barlow Condensed, tabular */
  --text-score-l: 72px;
  --text-score-m: 44px;
  --text-score-s: 28px;

  /* UI — Barlow */
  --text-title: 18px;   --lh-title: 1.3;
  --text-body-l: 17px;  --lh-body-l: 1.45;
  --text-body: 15px;    --lh-body: 1.45;
  --text-body-s: 13px;  --lh-body-s: 1.4;
  --text-label: 12px;   --tracking-label: 0.08em;
  --text-micro: 11px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
}

.scs-display-xl { font: var(--weight-black) var(--text-display-xl)/var(--lh-display-xl) var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); }
.scs-display-l  { font: var(--weight-bold) var(--text-display-l)/var(--lh-display-l) var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); }
.scs-display-m  { font: var(--weight-bold) var(--text-display-m)/var(--lh-display-m) var(--font-display); text-transform: uppercase; }
.scs-display-s  { font: var(--weight-bold) var(--text-display-s)/var(--lh-display-s) var(--font-display); text-transform: uppercase; }
.scs-title      { font: var(--weight-semibold) var(--text-title)/var(--lh-title) var(--font-ui); }
.scs-body-l     { font: var(--weight-regular) var(--text-body-l)/var(--lh-body-l) var(--font-ui); }
.scs-body       { font: var(--weight-regular) var(--text-body)/var(--lh-body) var(--font-ui); }
.scs-body-s     { font: var(--weight-regular) var(--text-body-s)/var(--lh-body-s) var(--font-ui); }
.scs-label      { font: var(--weight-semibold) var(--text-label)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.scs-score      { font-family: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1; }
:root {
  /* 4px base grid */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 96px;

  /* Radii — rails are square-ish, only balls are round */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Layout */
  --touch-min: 44px;
  --screen-gutter: 16px;
  --tabbar-height: 64px;
  --topbar-height: 52px;
  --content-max: 1200px;
  --bp-sm: 640px;
  --bp-md: 960px;
  --bp-lg: 1280px;
}
:root {
  /* Elevation: dark UI uses a 1px top highlight (like light on a rail) + soft drop */
  --shadow-0: none;
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-ball: 0 2px 3px rgba(0, 0, 0, 0.45);

  /* The table light — the single signature surface: an overhead lamp on cloth */
  --gradient-table-light: radial-gradient(120% 90% at 50% 18%, #2A8F60 0%, #1F7A52 32%, #145838 62%, #0B3322 100%);
  --gradient-arena: radial-gradient(90% 60% at 50% 0%, rgba(31, 122, 82, 0.28) 0%, rgba(4, 17, 11, 0) 70%);
  --gradient-scrim-bottom: linear-gradient(180deg, rgba(4, 17, 11, 0) 0%, rgba(4, 17, 11, 0.92) 100%);

  /* Motion — "ball rolling to rest": fast start, long gentle settle */
  --ease-roll: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-strike: cubic-bezier(0.5, 0, 0.75, 0);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  --blur-bar: saturate(140%) blur(18px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
button { font: inherit; }

/* Interaction helpers used by components */
.scs-press { transition: transform var(--dur-fast) var(--ease-roll), filter var(--dur-fast) var(--ease-roll), background-color var(--dur-fast) var(--ease-roll), border-color var(--dur-fast) var(--ease-roll); }
.scs-press:hover:not(:disabled) { filter: brightness(1.08); }
.scs-press:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.94); }
.scs-focus:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.scs-row:hover { background: rgba(243, 238, 223, 0.03); }