/* ============================================================
   BITS.BID VISUAL DNA — locked token sheet
   85% black / cream / gray · 10% asset identity · ≤5% acid lime
   ============================================================ */

/* ── Faces. Self-hosted: a silent fallback to Arial Narrow would
      destroy the display typography that carries the brand. ── */
@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 100%;
  font-display: block;
  src: url("/fonts/anybody.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/plexsans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/plexmono.woff2") format("woff2");
}

:root {
  /* Type roles */
  --font-display: "Anybody", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;

  /* Canonical palette from styles.md section 32. */
  --bb-ink: oklch(16% 0.012 260);
  --bb-carbon: oklch(20% 0.014 260);
  --bb-graphite: oklch(25% 0.016 260);
  --bb-steel: oklch(60% 0.016 255);
  --bb-fog: oklch(82% 0.012 250);
  --bb-paper: oklch(96% 0.012 92);
  --bb-white: oklch(99% 0.003 90);
  --bb-bid: oklch(88% 0.22 117);
  --bb-bid-ink: oklch(17% 0.045 117);
  --bb-asset-avax: oklch(62.21% 0.2038 25.10);
  --bb-asset-btc: oklch(75.23% 0.1663 62.59);
  --bb-asset-eth: oklch(62% 0.14 255);
  --bb-positive: oklch(72% 0.17 150);
  --bb-negative: oklch(65% 0.22 28);
  --bb-warning: oklch(80% 0.17 84);
  --bb-info: oklch(68% 0.13 240);
  --bb-rule-dark: oklch(34% 0.014 255);
  --bb-rule-light: oklch(86% 0.010 250);
  --bb-overlay: oklch(10% 0.010 260 / 0.72);

  /* Compatibility aliases for the existing static surfaces. */
  --ink: var(--bb-ink);
  --carbon: var(--bb-carbon);
  --graphite: var(--bb-graphite);
  --steel: var(--bb-steel);
  --fog: var(--bb-fog);
  --paper: var(--bb-paper);
  --white: var(--bb-white);
  --bid: var(--bb-bid);
  --bid-ink: var(--bb-bid-ink);
  --rule: var(--bb-rule-dark);
  --rule-soft: var(--bb-graphite);
  --page: var(--bb-ink);
  --raised: var(--bb-carbon);
  --strong: var(--bb-graphite);
  --fg: var(--bb-paper);
  --fg-2: var(--bb-steel);
  --asset-avax: var(--bb-asset-avax);
  --asset-btc: var(--bb-asset-btc);
  --asset-eth: var(--bb-asset-eth);
  --positive: var(--bb-positive);
  --negative: var(--bb-negative);
  --warning: var(--bb-warning);

  /* Type scale */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: 4rem;
  --text-5xl: 5.5rem;
  --text-hero: clamp(2.75rem, 7vw, 6.875rem);

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Geometry — almost square. No SaaS card radii. */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* Motion — fast, heavy, purposeful */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 360ms;
  --ease-bid: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-float: 0 18px 50px oklch(8% 0.01 260 / 0.24);

  /* Dark is the brand's home and the default. `color-scheme` keeps native
     controls, scrollbars, and form widgets in step with the palette. */
  color-scheme: dark;
}
/*
 * Light theme — the same visual DNA, inverted.
 *
 * Only the neutral ramp flips, and only the --bb-* source tokens are
 * redefined. Every alias (--page, --fg, --rule …) already points at these, so
 * both the alias layer and the raw --bb-* uses in index.html re-resolve with
 * no page CSS changes.
 *
 * Asset identity (AVAX red, BTC orange, ETH blue) and the acid lime keep their
 * hue: they encode meaning, not mood. A bid that changed colour with the theme
 * would stop being recognisable. Their *lightness* adapts, because the same
 * oklch(88%) lime that pops on ink is nearly invisible on paper.
 */
:root[data-theme="light"] {
  color-scheme: light;

  --bb-ink: oklch(97.5% 0.006 92);
  --bb-carbon: oklch(94% 0.006 92);
  --bb-graphite: oklch(89% 0.008 250);
  --bb-steel: oklch(46% 0.014 255);
  --bb-fog: oklch(34% 0.012 255);
  --bb-paper: oklch(21% 0.014 260);
  --bb-white: oklch(14% 0.012 260);

  /* 46%/0.17 measures 6.29:1 on the light ground — AA for normal text. The
     first pass at 56% measured 4.14 and failed, and read muddy beside the
     figure it is supposed to dominate. */
  --bb-bid: oklch(46% 0.17 122);
  --bb-bid-ink: oklch(98% 0.02 117);

  --bb-asset-avax: oklch(52% 0.20 25.10);
  --bb-asset-btc: oklch(56% 0.14 62.59);
  --bb-asset-eth: oklch(48% 0.15 255);

  --bb-positive: oklch(48% 0.15 150);
  --bb-negative: oklch(52% 0.20 28);
  --bb-warning: oklch(56% 0.14 84);
  --bb-info: oklch(48% 0.13 240);

  --bb-rule-dark: oklch(84% 0.008 250);
  --bb-rule-light: oklch(91% 0.006 250);
  --bb-overlay: oklch(97% 0.006 92 / 0.78);
  --shadow-float: 0 18px 50px oklch(50% 0.01 260 / 0.14);
}


/* Display type is physical: wide, heavy, tight. */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
}
.mono-label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--steel);
}