/* ============================================================
   ModigenceVision — Web register tokens
   SOURCE OF TRUTH: modigencevision-web / public/styles.css  :root
   Extracted verbatim at sync 2026-09-02 (staging). Re-extract on every
   site sync; do not hand-edit values here.
   Variables keep the site's own names (--ink, --line, --text-*, …) so a
   page copied from the site renders unchanged. Deck/product tokens live
   in colors.css / typography.css / spacing.css and are not affected.
   ============================================================ */

:root {
  /* ---- colour ---- */
  --ink: #111111;
  --ink-soft: #1d1d1d;
  --page: #ffffff;
  --band: #fafafa;
  --line: #e5e5e5;
  --muted: #6b6b6b;
  --blue: #009fe8;
  --blue-deep: #00459b;

  --dark-ink: #111111;
  --dark-fg: #ffffff;
  --dark-line: #2e2e2e;
  --dark-muted: #9a9a9a;

  /* ---- type ---- */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-5xl: 76px;   /* display / hero */
  --text-4xl: 60px;   /* display, secondary */
  --text-3xl: 46px;   /* h1 */
  --text-2xl: 36px;   /* h2, section title */
  --text-xl: 28px;    /* h3 */
  --text-lg: 22px;    /* h3, card title */
  --text-md: 18px;    /* lead */
  --text-base: 16px;  /* body */
  --text-sm: 14px;    /* label, nav, button */
  --text-xs: 12px;    /* eyebrow, meta */

  --leading-tight: 1.12;
  --leading-normal: 1.55;

  --tracking-tighter: -0.022em; /* display */
  --tracking-tight: -0.012em;   /* heading */
  --tracking-eyebrow: 0.16em;   /* uppercase label */
  --tracking-button: 0.18em;

  --w-display: 400; /* @kind font */
  --w-body: 400; /* @kind font */
  --w-medium: 500; /* @kind font */
  --w-semibold: 600; /* @kind font */

  --measure: 68ch;

  /* ---- layout ---- */
  --max-w: 1440px;
  --gutter: 64px;
  --pad-y: 112px;      /* section vertical padding, 96–128 range */
  --radius: 0;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur: 160ms; /* @kind other */
}

/* ---- breakpoints: 1440 / 1024 / 768 / 480 ---- */
@media (max-width: 1024px) { :root { --gutter: 40px; --pad-y: 88px; --text-5xl: 60px; --text-3xl: 38px; --text-2xl: 30px; } }
@media (max-width: 768px)  { :root { --gutter: 28px; --pad-y: 72px; --text-5xl: 46px; --text-xl: 24px; } }
@media (max-width: 480px)  { :root { --gutter: 20px; --pad-y: 56px; --text-5xl: 36px; --text-3xl: 30px; --text-2xl: 26px; --text-md: 17px; } }