/* Coop's tokens (every component reads these names). The colours come from what the top meme coins do (2026-10-22,
   103 logos measured): each winner owns ONE saturated colour; warm accents are crowded (56 of 103) and the light sky
   blues are taken (PENGU, BRETT). So: electric cobalt is Coop's, a FILL (the brand, the one action, the hero field;
   white on it 6.8:1), with --accent-ink (periwinkle, 8:1) wherever the accent is text on the night. Acid lime means
   money that moved or is live, and is the hero's highlight and its one bright button (lime on cobalt 5.8:1). The gold
   token coin and the pigeon's sunset shades are the warm notes. Everything else is deep navy: no white pages. */
/* the fonts live on Coop's own server (web/fonts, Latin, variable): no third party sees a visit, nothing to block */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url('/fonts/bricolage-latin.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/figtree-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* the brand */
  --sheen: #2D4BFF;         /* magenta: Coop, the one action, the hero field (a fill) */
  --sheen-deep: #1F38E0;
  --sheen-press: #172BB8;
  --sheen-text: #8FA3FF;    /* magenta as text on the dark ground */
  --sheen-wash: rgba(45, 75, 255, 0.16);
  --violet: #8A3FFC;        /* the middle of the neck's sheen; art only */
  --jade: #C6FF3D;          /* money that moved or is live: SOL, delivered, live dots */
  --jade-deep: #C6FF3D;
  --jade-wash: rgba(198, 255, 61, 0.12);
  --plum: #0B1033;          /* bands and buttons on magenta */
  --plum-2: #04061A;        /* the footer */
  --plum-hi: #1A2156;
  --night: #070A1F;         /* the ground */
  --gold: #FFC93C;          /* a token, in the art */
  --gold-2: #E9A912;
  --gold-ink: #FFD978;
  --teal: #C6FF3D;
  --cream: #141B42;
  /* old names a few components still read: they map onto the new world */
  --navy: #0B1033;
  --navy-2: #04061A;
  --navy-hi: #1A2156;
  --red: #2D4BFF;
  --red-2: #8FA3FF;
  --red-wash: rgba(45, 75, 255, 0.16);
  --blue: #0B1033;
  --blue-field: #0B1033;
  --stripe: linear-gradient(90deg, var(--jade), var(--violet) 50%, var(--sheen));

  /* the surfaces: night plum, a step lighter for each layer */
  --page: #070A1F;
  --bg: #070A1F;
  --bg-2: #161E48;          /* wells, tracks, table heads */
  --surface: #0E1433;       /* cards */
  --surface-2: #141B42;
  --surface-3: #1A2250;
  --line: #222B5C;
  --line-2: #2E3A73;
  --line-3: #46549C;
  --border: 1px solid var(--line);
  --ink: #FFFFFF;
  --ink-2: #DDE3F7;
  --muted: #9BA6CC;
  --accent: #2D4BFF;
  --accent-2: #8FA3FF;
  --accent-ink: #8FA3FF;
  --accent-wash: rgba(45, 75, 255, 0.16);
  --on-accent: #FFFFFF;
  --accent-ink: #8FA3FF;   /* the accent as TEXT on the dark ground (cobalt itself is a fill: 2.9:1 as text, this is 8:1) */
  --good: #C6FF3D;
  --good-wash: rgba(198, 255, 61, 0.12);
  --bad: #FF8A95;
  --bad-wash: rgba(255, 138, 149, 0.12);
  --warn: #FFC96B;
  --warn-wash: rgba(255, 201, 107, 0.12);
  --pill: rgba(255, 255, 255, 0.08);

  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 68px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-btn: 999px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 36px -18px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 34px 70px -30px rgba(0, 0, 0, 0.85);

  --t-fast: 160ms;
  --t: 320ms;
  --t-slow: 700ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-stamp: cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* the plum bands (custody, the desk strip): a step lighter than the ground. Components read the same names. */
.on-navy, .on-plum {
  color-scheme: dark;
  --bg: #0B1033;
  --bg-2: rgba(255, 255, 255, 0.07);
  --surface: #111842;
  --surface-2: #1A2156;
  --surface-3: #1C2456;
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.2);
  --line-3: rgba(255, 255, 255, 0.34);
  color: var(--ink);
}

/* the magenta field (the hero, the closing band): white type, plum buttons */
.on-blue, .on-sheen {
  --ink: #FFFFFF;
  --ink-2: #FFFFFF;
  --muted: #DCE3FF;
  --line: rgba(255, 255, 255, 0.28);
  --line-2: rgba(255, 255, 255, 0.4);
  --line-3: rgba(255, 255, 255, 0.55);
  --pill: rgba(255, 255, 255, 0.14);
  --accent: #0B1033;
  --accent-2: #1A2156;
  --accent-ink: #FFFFFF;   /* text accents on the cobalt field are white */
  --on-accent: #FFFFFF;
  color: var(--ink);
}

/* cards inside the magenta field go back to the night tokens */
.on-sheen .ticket, .on-sheen .panel, .on-sheen .card, .on-blue .ticket, .on-blue .panel {
  --surface: #0E1433;
  --surface-2: #141B42;
  --bg-2: #161E48;
  --ink: #FFFFFF;
  --ink-2: #DDE3F7;
  --muted: #9BA6CC;
  --line: #222B5C;
  --line-2: #2E3A73;
  --line-3: #46549C;
  --accent: #2D4BFF;
  --accent-2: #8FA3FF;
  --accent-wash: rgba(45, 75, 255, 0.16);
  --on-accent: #FFFFFF;
  color: var(--ink);
}