/* ============================================================
   Design tokens — single source of truth for brand colours.
   Loaded first on every page so var(--sc-*) resolves globally.
   Values are the existing palette; no visual change on adoption.
   ============================================================ */
:root {
  /* Brand */
  --sc-accent: #f73e02; /* Swiss Cluster orange */

  /* Neutrals — dark to light */
  --sc-black: #000;
  --sc-ink: #2a2a2a; /* primary dark (text, bars, panels) */
  --sc-gray: #7d7d7d; /* mid grey body copy */
  --sc-gray-2: #8a8a8a; /* secondary grey */
  --sc-gray-3: #c4c4c6; /* light grey (machine names, totop) */
  --sc-border: #d8d8da; /* hairline borders */
  --sc-surface: #ececee; /* card / panel fill */
  --sc-white: #ffffff;

  /* Translucent */
  --sc-glass: rgba(255, 255, 255, 0.6);

  /* ---- Type ---- */
  --sc-font-sans: "Inter", Helvetica, Arial, sans-serif;

  /* Weights (collapsed scale: 300->regular, 800->bold) */
  --sc-weight-regular: 400;
  --sc-weight-medium: 500;
  --sc-weight-semibold: 600;
  --sc-weight-bold: 700;
  --sc-weight-black: 900;

  /* Body / UI size scale (13-24px collapsed to 4 steps).
     Display/heading sizes stay as the per-context ladders for now;
     a follow-up converts those to fluid clamp(). */
  --sc-text-sm: 14px; /* fine print, labels (absorbs 13/14) */
  --sc-text-base: 16px; /* secondary body (absorbs 15/16/17) */
  --sc-text-md: 18px; /* primary body (absorbs 18/19) */
  --sc-text-lg: 24px; /* sub-headings (absorbs 22/24) */
}