/* TonSurge brand tokens, taken from the Figma file "tonsurge" (frames genesis ui1–ui3) and refined
   for the premium pass (Oct 2026): matte black + graphite surfaces, white type, electric blue for
   interaction, restrained silver, and gold only for Genesis ownership / winning.
   Colours, materials and fonts live here; layout lives in styles.css. */
:root {
  color-scheme: dark;

  /* ---- surfaces: matte black → graphite ---- */
  --bg: #000000;
  --bg-soft: #050505;
  --s1: #0a0a0b;            /* cards */
  --s2: #111113;            /* inset wells, controls */
  --s3: #18181b;            /* raised controls, active segments */
  --s4: #222226;            /* hover */
  --surface: linear-gradient(180deg, #0e0e10 0%, #09090a 100%);
  --surface-raised: linear-gradient(180deg, #141416 0%, #0c0c0d 100%);

  /* ---- lines: precise hairlines instead of shadows ---- */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.11);
  --line-3: rgba(255, 255, 255, 0.18);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.045);      /* top edge highlight on cards */
  --float: 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 8px 20px -12px rgba(0, 0, 0, 0.7);  /* neutral, floating layers only */

  /* ---- text ---- */
  --text: #ffffff;
  --t80: rgba(255, 255, 255, 0.8);
  --t70: rgba(255, 255, 255, 0.7);
  --t60: rgba(255, 255, 255, 0.6);
  --t50: rgba(255, 255, 255, 0.5);
  --t46: rgba(255, 255, 255, 0.46);
  --t40: rgba(255, 255, 255, 0.4);
  --t30: rgba(255, 255, 255, 0.3);
  --g10: rgba(255, 255, 255, 0.1);
  --g18: rgba(255, 255, 255, 0.18);
  --g20: rgba(255, 255, 255, 0.2);
  --hair: rgba(255, 255, 255, 0.11);
  --hair-strong: rgba(255, 255, 255, 0.19);

  /* ---- interaction blue ---- */
  --blue: #30a1f5;
  --blue-2: #4bb0ff;
  --blue-3: #6ccbff;
  --blue-4: #1eafff;
  --blue-ink: #8ccaff;
  --blue-wash: rgba(48, 161, 245, 0.12);
  --blue-line: rgba(48, 161, 245, 0.42);

  /* ---- status ---- */
  --green: #2fd36b;
  --green-deep: #129f00;
  --green-ink: #7be39c;
  --green-wash: rgba(47, 211, 107, 0.12);
  --amber: #f5a524;
  --amber-ink: #ffc56b;
  --amber-wash: rgba(245, 165, 36, 0.12);
  --red: #ff6b6b;
  --red-ink: #ff9d9d;
  --red-wash: rgba(255, 107, 107, 0.12);

  /* ---- Genesis gold: ownership and winning only ---- */
  --gold: #d8b46a;
  --gold-ink: #ead09a;
  --gold-wash: rgba(216, 180, 106, 0.12);
  --gold-line: rgba(216, 180, 106, 0.38);
  --grad-gold: linear-gradient(180deg, #f1dcab 0%, #d3ad62 100%);

  /* ---- silver ---- */
  --silver-text: linear-gradient(180deg, #ffffff 0%, #d9dbe0 55%, #9a9ca3 100%);

  --grad-connect: linear-gradient(180deg, #3aa8fb 0%, #2b97ea 100%);
  --grad-button: linear-gradient(180deg, #3aa8fb 0%, #2b97ea 100%);
  --grad-text: linear-gradient(90deg, #30a1f5 0%, #6ccbff 100%);
  --grad-green-text: linear-gradient(180deg, #129f00 0%, #16c700 100%);
  --grad-panel: linear-gradient(180deg, rgba(52, 52, 52, 0.25) 0%, #0f0f0f 100%);
  --grad-live: radial-gradient(100% 100% at 50% 0%, rgba(52, 52, 52, 0.35) 0%, rgba(33, 33, 33, 0.675) 42.55%, #0f0f0f 85.1%);
  --grad-idcard: linear-gradient(180deg, #101010 0%, #000000 100%);
  --grad-bidcard: radial-gradient(91.5% 91.5% at 50% 8.5%, #101010 39.66%, #070607 79.86%);

  /* ---- shape ---- */
  --r-xl: 28px;   /* hero cards, sheets */
  --r-lg: 22px;   /* cards */
  --r-md: 16px;   /* inner wells */
  --r-sm: 12px;   /* small controls */
  --r-pill: 999px;

  /* SF Pro Display, embedded (files supplied by the project owner; Latin subset, WOFF).
     There is no upright Semibold file, so weight 600 renders with the Bold face. */
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

@font-face { font-family: "SF Pro Display"; src: url("sf-pro-display-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("sf-pro-display-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("sf-pro-display-bold.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }