/* XRPL Access Hub — design tokens. Managed by Ansible (role: hub_landing).
   The ONLY file in which a colour literal may appear. Every other rule in
   hub.css refers to these variables; a new colour means a new token here, not a
   hex value at the point of use.
   Loaded before hub.css on both pages. Self-hosted fonts: the pages are served
   under default-src 'self', which blocks Google Fonts outright.
   Palette and type follow xrpl-commons.org (navy, cream and its accent set) in
   the light, docs-first "Ledger Mosaic" direction. */

/* Variable fonts: one file per family covers every weight (and, for Archivo,
   every width) the pages use. */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap;
  font-weight: 200 800;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Page. Cream ground, navy ink: the brand's own pair. */
  --surface:#f5f4e7; --surface-raised:#fbfaf2; --surface-hover:#e2e5ff;
  --ink:#000637; --ink-muted:#2a2f5c; --ink-subtle:#555a82; --ink-faint:#9a9cb5;
  --line:#d9d7c6; --line-control:#000637;
  --accent:#000637; --accent-hover:#1d2777; --on-accent:#f5f4e7;
  --link-underline:#1aa4ff;
  --tag:#e2e5ff;
  --notice:#fff8c2;

  /* State colours are text as well as dots, so each clears 4.5:1 on --surface. */
  --status-ok:#0b7a45; --status-warn:#8a5300; --status-down:#c0122e;
  --chart-bar:#3a47b5; --chart-mark:#ff671a;

  /* Code sits on navy, the one dark surface on the page. */
  --code-surface:#000637; --code-bar:#0a1148; --code-line:#1d2566;
  --code-ink:#f5f4e7; --code-muted:#a3a9d9; --code-string:#19ff83; --code-select:#19ff83;

  /* The ledger mosaic: oldest ledgers in navy, the newest in the brand accents. */
  --mosaic-ground:#000637; --mosaic-old:#0d1550; --mosaic-old-alt:#1a2366;
  --mosaic-hour:#19ff83; --mosaic-latest:#ff671a;

  --font-display:"Archivo","Plus Jakarta Sans",system-ui,sans-serif;
  --font-sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  --section-gap:84px;
  --radius-sm:4px; --radius-md:6px; --radius-pill:999px;
  --border:2px;
  --focus:#791aff;
  --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
  --content-max:1240px; --measure:68ch; --nav-width:200px;

  /* Light only, by design. There is no dark theme and no [data-theme] override:
     a second palette would need colour literals this file does not define. */
  color-scheme: light;
}