/* ============================================================
   Lingual — Spacing, radii, borders, layout
   The product is built on hairline rules and generous, calm
   whitespace — a printed-bulletin rhythm, not a dense dashboard.
   ============================================================ */
:root {
  /* — Spacing scale (rem) — */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;

  /* — Radii — */
  --radius-xs: 4px;       /* buttons, inputs, selects, nav cta */
  --radius-sm: 0.55rem;   /* readiness strip, flow cards */
  --radius-md: 9px;       /* caption bubbles */
  --radius-lg: 0.85rem;   /* hero shot frame, large cards */
  --radius-xl: 1.4rem;    /* pillar screenshots */
  --radius-pill: 999px;   /* pills, status banner, primary CTAs (attendee) */
  --radius-phone: 2.6rem; /* device bezel */

  /* — Borders — */
  --border-width: 1px;
  --border-hairline-style: 1px solid var(--rule);
  --rail-width: 3px;      /* caption-bubble left rail */
  --rail-width-active: 4px;

  /* — Layout widths — */
  --width-attendee: 640px;   /* caption reading column */
  --width-operator: 38rem;   /* operator dashboard column */
  --width-marketing: 64rem;  /* landing content */

  /* — Motion — */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur-med:  0.25s; /* @kind other */
  --dur-slow: 0.9s; /* @kind other */
}