/* Korbel.ai — Responsive & touch tokens
   The product ships on desktop dashboards AND a mobile field app; marketing
   must hold from phone to wide desktop.

   These are OPT-IN tokens. Nothing here rewrites the static type scale
   globally — decks and fixed-canvas surfaces must never reflow because a
   preview window is narrow. Consume what fits the surface. */

:root {
  /* ---- Breakpoints — reference constants ----
     CSS variables cannot drive @media; use these literals in queries:
     480 / 768 / 1080 / 1440. */
  --bp-compact:  480px;   /* @kind other */ /* field phone */
  --bp-medium:   768px;   /* @kind other */ /* tablet, site trailer */
  --bp-expanded: 1080px;  /* @kind other */ /* desktop */
  --bp-wide:     1440px;  /* @kind other */ /* wide desktop */

  /* ---- Touch targets — the field app runs gloved ---- */
  --hit-target:       44px;  /* minimum interactive size on touch */
  --hit-target-field: 48px;  /* gloved-hand critical actions */

  /* ---- Fluid type — marketing / web surfaces only ----
     Product UI keeps the static scale; the marketing hero may exceed the
     54px display cap on wide viewports. */
  --display-fluid:  clamp(38px, 6.5vw, 76px);  /* @kind font */
  --headline-fluid: clamp(30px, 4.4vw, 46px);  /* @kind font */
  --title-fluid:    clamp(22px, 3vw, 27px);    /* @kind font */

  /* ---- Compact spacing — surfaces below 768px ---- */
  --page-margin-compact: 20px;
  --gutter-compact:      16px;
}