/* ============================================================
   osmos-tokens.css — design tokens, fonts, legacy aliases.
   Loads on EVERY page, AFTER style.css (so the two deliberate
   alias changes win the cascade).
   Spec: docs/superpowers/specs/2026-07-05-osmoscloud-redesign-design.md
   ============================================================ */

@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap;
  src: url('/fonts/SpaceGrotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap;
  src: url('/fonts/SpaceGrotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap;
  src: url('/fonts/Poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap;
  src: url('/fonts/Poppins-600.woff2') format('woff2'); }

:root {
  /* brand blues */
  --blue-050: #EFF7FF;
  --blue-100: #DBEEFF;
  --blue-500: #0099FF;   /* brand; large accents only (3.0:1 on white) */
  --blue-700: #006BCE;   /* links + small blue text (5.3:1 AA) */
  --navy-800: #113E55;   /* deep sections (kept from current site) */
  --navy-900: #0A2233;   /* headings, footer, darkest ink */
  /* neutrals */
  --ink: #24313D;
  --muted: #55677A;
  --line: #E3E9EF;
  --surface: #F6F9FC;
  /* CTA */
  --cta-500: #F97316;    /* primary CTA fill; white text = documented brand exception */
  --cta-600: #EA6C0A;    /* hover */
  --cta-700: #C2410C;    /* orange as small text on white (5.2:1 AA) */
  --cta-050: #FFF3EA;
  /* illustration / data-viz only — NOT UI accents */
  --viz-cyan: #0DCAF0;
  --viz-amber: #FFB52D;
  /* semantic */
  --ok: #1E7E34;
  --warn: #B45309;
  --danger: #C0392B;
  /* shape + elevation */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(10,34,51,.06);
  --sh-md: 0 8px 24px rgba(10,34,51,.10);
  --sh-lg: 0 24px 64px rgba(10,34,51,.16);
  /* type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* ---- legacy aliases (style.css vars -> tokens). Values chosen so
     unconverted pages keep rendering; deliberate changes:
     highlightColor #FE771F -> #F97316 (CTA hue alignment),
     highlightColor2 #F5690E -> #EA6C0A (hover hue alignment),
     mainColor #212529 -> #24313D (ink), and bodyFont now actually
     loading. -------------------------------------------------- */
  --mainColor: var(--ink);
  --darkFont: #1A1A1A;
  --grayPara: #696969;
  --secColor: var(--viz-cyan);
  --secColorHover: #009fbf;
  --highlightColor: var(--cta-500);
  --highlightColor2: var(--cta-600);
  --highlightColor3: var(--viz-amber);
  --fourColor: var(--blue-500);
  --bgColor: var(--blue-700);
  --bg2Color: #e7f6ff;
  --bg3Color: #30383d;
  --bg4Color: #017de9;
  --bg5Color: #1a9dec;
  --bg6Color: var(--navy-800);
  --bodyFont: 'Poppins', sans-serif;
}