/* Spirit Fingers Trio brand tokens v2.0 (release era, Nov 17 2026)
   Load the fonts with this exact line in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Hanken+Grotesk:ital,wght@0,400..700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   Rules: TRIO is always --sf-volt. --sf-fire is reserved for the eclipse corona only (never text, never UI).
*/
:root{
  /* core */
  --sf-void:#07070b;        /* the disc; page ground */
  --sf-night:#0e0e14;       /* raised surface */
  --sf-dusk:#16161f;        /* second surface, cards */
  --sf-volt:#46b1ff;        /* TRIO, links, primary action */
  --sf-volt-soft:#9fd6ff;   /* corona inner ring, hover */
  --sf-hot:#eaf6ff;         /* corona edge, brightest light */
  --sf-fire:#f6b53e;        /* corona ONLY (fire mark, totality). Never type, never buttons. */
  --sf-ink:#f4f3f0;         /* body text on void */
  --sf-mute:#a2a1ab;        /* secondary text on void, AA on --sf-void */
  --sf-line:rgba(234,246,255,.12);

  /* corona scale (inside to outside), for gradients and glow rings */
  --sf-corona-0:#eaf6ff;
  --sf-corona-1:#9fd6ff;
  --sf-corona-2:#46b1ff;
  --sf-corona-3:#1f6fb8;
  --sf-corona-4:#0b2a48;
  --sf-corona-5:#07070b;
  --sf-corona-gradient:radial-gradient(circle, var(--sf-void) 0 50%, var(--sf-hot) 52.5%, var(--sf-volt-soft) 55%, rgba(70,177,255,.45) 62%, rgba(70,177,255,.12) 80%, transparent 100%);

  /* universe accents: per-player card palettes from the Spirit Fingers universe bible v3.
     Use one pair per player, only next to that player's name or card. Never as global UI colour.
     Mohini Dey and Kosa are on HOLD and deliberately absent. */
  --sf-u-greg-a:#46b1ff;  --sf-u-greg-b:#eee8dc;   /* The Architect */
  --sf-u-mike-a:#f17869;  --sf-u-mike-b:#f1ecdd;   /* Blaque Dynamite, The Detonator */
  --sf-u-hadrien-a:#a66a82; --sf-u-hadrien-b:#e9dec7;
  --sf-u-dario-a:#b32194; --sf-u-dario-b:#a8d9e8;
  --sf-u-max-a:#bde8c0;   --sf-u-max-b:#593653;
  --sf-u-bubby-a:#22ad58; --sf-u-bubby-b:#fff0cf;
  --sf-u-marco-a:#d2b17b; --sf-u-marco-b:#612f45;
  --sf-u-xavier-a:#4b1024; --sf-u-xavier-b:#d5e7aa;
  --sf-u-roni-a:#ef4e9b;  --sf-u-roni-b:#f2e6a3;
  --sf-u-gergo-a:#007f73; --sf-u-gergo-b:#f2f2ee;
  --sf-u-sput-a:#e8dc35;  --sf-u-sput-b:#5b355e;
  --sf-u-mononeon-a:#b9dc28; --sf-u-mononeon-b:#d87836;
  --sf-u-joe-a:#785137;   --sf-u-joe-b:#f3d9b2;
  --sf-u-gary-a:#7c843b;  --sf-u-gary-b:#e8bfb4;
  --sf-u-devon-a:#f58b25; --sf-u-devon-b:#274d86;
  --sf-u-thomas-a:#d32b32; --sf-u-thomas-b:#f0ede4;
  --sf-u-ronald-a:#6424d6; --sf-u-ronald-b:#d4d1cb;
  --sf-u-darryl-a:#20552d; --sf-u-darryl-b:#b7d9ec;

  /* type */
  --sf-font-display:"Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, sans-serif;  /* headlines, use font-stretch 112% to 125% */
  --sf-font-body:"Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --sf-font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;            /* dates, times, countdown labels */
  --sf-stretch-wide:125%;
  --sf-stretch-display:112%;
  --sf-track-label:.18em;   /* 11 to 13 px uppercase labels only */
  --sf-step--1:clamp(.8rem,.76rem + .2vw,.875rem);
  --sf-step-0:clamp(1rem,.95rem + .25vw,1.125rem);
  --sf-step-1:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  --sf-step-2:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --sf-step-3:clamp(2.2rem,1.6rem + 3vw,4rem);
  --sf-step-4:clamp(3rem,2rem + 5vw,6.5rem);

  /* space and shape */
  --sf-space-1:4px; --sf-space-2:8px; --sf-space-3:12px; --sf-space-4:16px; --sf-space-5:24px;
  --sf-space-6:32px; --sf-space-7:48px; --sf-space-8:72px; --sf-space-9:112px;
  --sf-radius-pill:999px;   /* buttons and tags: round like the disc */
  --sf-radius-card:6px;     /* cards and photos: nearly square */
  --sf-radius-0:0;
  --sf-clear:.5;            /* clear space around any lockup = 0.5 x disc diameter */
}