/* ============================================================================
   hub.toekom.st — site.css (the sanctioned override layer)
   Bridges the old Claude-Design token names used throughout HUB.dc.html onto
   the toekomst brand system (site-kit/tokens.css): white paper, ink, Bluu
   Next display + Poppins body, hairlines, 2px radius, no shadows, no cream
   surfaces. Loaded AFTER the legacy _ds stylesheets and brand/tokens.css so
   these values win.
   ========================================================================== */
:root {
  /* ---- surfaces & lines (paper + hairlines; no cream) ------------------ */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-border: rgba(0, 0, 0, 0.12);

  /* ---- ink & greys ------------------------------------------------------ */
  --color-text: #111111;
  --color-text-muted: #4D4D4D;
  --color-text-faint: #8A8A8A;
  --color-ink-900: #000000;
  --color-ink-800: #111111;
  --color-ink-700: #333333;
  --color-ink-600: #4D4D4D;
  --color-ink-500: #6E6E6E;
  --color-ink-400: #8A8A8A;
  --color-ink-300: #B5B5B5;

  /* ---- former cream tints -> neutral paper greys ------------------------ */
  --color-cream-50: #FAFAFA;
  --color-cream-100: #F5F5F5;
  --color-cream-200: #ECECEC;
  --color-cream-300: #E0E0E0;
  --color-cream-400: #C9C9C9;
  --color-cream-600: #8A8A8A;

  /* ---- brand ramps (from color/tokens.json) ----------------------------- */
  --color-primary: var(--red-500);
  --color-secondary: var(--blue-500);
  --color-red-50: var(--red-50);
  --color-red-100: var(--red-100);
  --color-red-200: var(--red-200);
  --color-red-500: var(--red-500);
  --color-red-600: var(--red-600);
  --color-red-700: var(--red-700);
  --color-green-50: var(--green-50);
  --color-green-200: var(--green-200);
  --color-green-500: var(--green-500);
  --color-green-600: var(--green-600);
  --color-green-700: var(--green-700);
  --color-blue-50: var(--blue-50);
  --color-blue-200: var(--blue-200);
  --color-blue-300: var(--blue-300);
  --color-blue-600: var(--blue-500);   /* text-safe blue */
  --color-blue-700: var(--blue-700);
  --color-orange-50: var(--orange-50);
  --color-orange-200: var(--orange-200);
  --color-orange-700: var(--orange-600); /* text-safe orange */
  --color-yellow-50: var(--yellow-50);
  --color-yellow-300: var(--yellow-300);
  --color-yellow-700: var(--yellow-700);

  /* ---- type -------------------------------------------------------------
     Bluu Next carries display (>=20pt only); Poppins carries body AND the
     small uppercase labels formerly set in the mono font (brand kickers). */
  --font-display: "Bluu Next", Georgia, serif;
  --font-titling: "Bluu Next Titling", "Bluu Next", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Poppins", system-ui, sans-serif;

  /* ---- geometry & motion (no rounded cards, no shadows) ----------------- */
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-full: 2px;
  --shadow-lg: none;
  --ring: 0 0 0 3px rgba(0, 83, 151, 0.15);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Region-lane washes arrive through the same ramps, quieter on white */
body { background: #FFFFFF; }