/* MOAR design tokens, v1.0, 2 November 2026. Direction D, Moooar.
   Shared by the treasury site and anything else on screen. Light (cream paper) is the default; dark (navy) applies when
   the OS asks for dark (unless the page sets data-theme="light") and whenever the page sets data-theme="dark".

   Rules of use (GUIDE.md has the rest)
   - Cobalt is the brand ground: the hero, banners, the main stack card. Gold is the coins and the one thing to look at
     (the stack figure, the current band, the main button on cobalt or navy). Cream is paper, navy is ink.
   - The main button is cobalt on paper and gold on navy or cobalt (--accent switches with the theme).
   - Gold is never text on paper (1.4:1). On navy and cobalt it may be.
   - --up and --down are market colours: HYPE's direction and the band it crossed. Never decoration.
   - Every figure in a column uses tabular numbers (.num or font-variant-numeric: tabular-nums).
   - Display: Dela Gothic One (headlines, big numbers, never body). Text: Instrument Sans. Addresses and hashes: Space Mono. */

@font-face {
  font-family: "Dela Gothic One";
  src: url("../fonts/DelaGothicOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-wdth-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand constants: the same in both themes. Logo files use exactly these. */
  --moar-cobalt: #2B3BFF;
  --moar-gold: #FFC52E;
  --moar-gold-side: #E59A00;
  --moar-cream: #FFF1DC;
  --moar-navy: #0B0E2C;

  --bg: #FFF1DC;
  --surface: #FFF8EC;
  --surface-2: #F7E4C6;
  --surface-3: #F0D8B2;
  --line: #EBD3AE;
  --line-strong: #0B0E2C;
  --line-input: #827D90;
  --fg: #0B0E2C;
  --fg-2: #4A4A63;
  --fg-3: #827D90;
  --accent: #2B3BFF;
  --accent-hover: #1A29E6;
  --accent-text: #2B3BFF;
  --accent-wash: #E3E4FF;
  --on-accent: #FFF1DC;
  --highlight: #FFC52E;
  --on-highlight: #0B0E2C;
  --brand-ground: #2B3BFF;
  --on-brand: #FFF1DC;
  --on-brand-2: #DCDDFF;
  --inverse: #0B0E2C;
  --on-inverse: #FFF1DC;
  --up: #107A45;
  --up-wash: #DDEFD9;
  --down: #C2302A;
  --down-wash: #F8DCCB;
  --ok: #107A45;
  --ok-wash: #DDEFD9;
  --danger: #C2302A;
  --danger-wash: #F8DCCB;
  --on-danger: #FFFFFF;
  --focus: #2B3BFF;

  /* Type */
  --font-display: "Dela Gothic One", "Arial Black", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tracking-display: -0.02em;   /* headlines and big numbers */
  --leading-display: 0.98;
  --leading-text: 1.55;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-21: 21px;
  --text-26: 26px;
  --text-33: 33px;
  --text-42: 42px;
  --text-56: 56px;
  --text-72: 72px;
  --text-96: 96px;
  --text-128: 128px;

  /* Space, in 4 px steps */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* Shape: square cards, inputs and tables; pills for buttons, chips and token images */
  --radius-none: 0;
  --radius-pill: 999px;
  --border: 2px;                 /* poster borders: cards and tables use --border solid var(--line-strong) */
  --hairline: 1px;               /* rows inside a card use --hairline solid var(--line) */

  /* Focus: a 2 px gap in the page colour, then a 2 px ring */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  /* Elevation: only menus, popovers and dialogs float */
  --shadow-float: 0 2px 0 rgb(11 14 44 / 0.9), 0 12px 32px rgb(11 14 44 / 0.18);
  /* Riso grain for cobalt grounds: background-image: var(--grain); mix-blend-mode: multiply; opacity: .18 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0E2C;
    --surface: #12163A;
    --surface-2: #1A1F4A;
    --surface-3: #222859;
    --line: #262C5E;
    --line-strong: #FFF1DC;
    --line-input: #7C7FA8;
    --fg: #FFF1DC;
    --fg-2: #C3BFD6;
    --fg-3: #8A87A8;
    --accent: #FFC52E;
    --accent-hover: #FFD15C;
    --accent-text: #FFD15C;
    --accent-wash: #2B2A3A;
    --on-accent: #0B0E2C;
    --highlight: #FFC52E;
    --on-highlight: #0B0E2C;
    --brand-ground: #2B3BFF;
    --on-brand: #FFF1DC;
    --on-brand-2: #DCDDFF;
    --inverse: #FFF1DC;
    --on-inverse: #0B0E2C;
    --up: #4BD08A;
    --up-wash: #14333A;
    --down: #FF6B61;
    --down-wash: #3A1C33;
    --ok: #4BD08A;
    --ok-wash: #14333A;
    --danger: #FF6B61;
    --danger-wash: #3A1C33;
    --on-danger: #0B0E2C;
    --focus: #FFD15C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0E2C;
  --surface: #12163A;
  --surface-2: #1A1F4A;
  --surface-3: #222859;
  --line: #262C5E;
  --line-strong: #FFF1DC;
  --line-input: #7C7FA8;
  --fg: #FFF1DC;
  --fg-2: #C3BFD6;
  --fg-3: #8A87A8;
  --accent: #FFC52E;
  --accent-hover: #FFD15C;
  --accent-text: #FFD15C;
  --accent-wash: #2B2A3A;
  --on-accent: #0B0E2C;
  --highlight: #FFC52E;
  --on-highlight: #0B0E2C;
  --brand-ground: #2B3BFF;
  --on-brand: #FFF1DC;
  --on-brand-2: #DCDDFF;
  --inverse: #FFF1DC;
  --on-inverse: #0B0E2C;
  --up: #4BD08A;
  --up-wash: #14333A;
  --down: #FF6B61;
  --down-wash: #3A1C33;
  --ok: #4BD08A;
  --ok-wash: #14333A;
  --danger: #FF6B61;
  --danger-wash: #3A1C33;
  --on-danger: #0B0E2C;
  --focus: #FFD15C;
  color-scheme: dark;
}

.num { font-variant-numeric: tabular-nums; }