/* 01:PM — Density & application surfaces.
   The site breathes (--section-y 96–128px). An application cannot.
   Every component that lists, rows or stacks accepts `dense` and reads the -dense tokens:
     · the marketing site and commercial docs use the AIRY variant (default),
     · the dashboard, CRM and every back-office use the DENSE variant.
   Never mix the two inside one surface. */

:root {
  /* Row heights & padding — airy (site) then dense (apps) */
  --ui-row-h:        48px;
  --ui-row-h-dense:  36px;
  --ui-pad-y:        14px;
  --ui-pad-y-dense:  8px;
  --ui-pad-x:        16px;
  --ui-pad-x-dense:  12px;
  --ui-gap:          var(--s-4);
  --ui-gap-dense:    var(--s-2);

  /* Accessibility */
  --tap-min:   44px;                              /* minimum touch target on mobile */
  --ring:      0 0 0 3px var(--c-accent-100);     /* the single focus ring, everywhere */
  --ring-danger: 0 0 0 3px var(--c-warm-100);

  /* Application surfaces (missing from the light/dark pair before apps existed) */
  --surface-raised:  #FFFFFF;   /* drawers, modals, popovers — above the page */
  --surface-sunken:  #F0F6F7;   /* table headers, board columns, wells */

  /* Ink-family brand surfaces — fixed in both themes (they ARE the dark ground). */
  --surface-ink-raised: #17293A;  /* panel lifted off ink: Wordmark cadran on dark */
  --surface-ink-tile:   #24405A;  /* square tile on an ink chrome: Mark plate, still visible at 16px */
  --scrim:           rgba(11,22,34,.44);

  /* Layering */
  --z-sticky:  10; /* @kind other */
  --z-scrim:   50; /* @kind other */
  --z-panel:   60; /* @kind other */
  --z-toast:   80; /* @kind other */
}

:root[data-theme="dark"] {
  --surface-raised: #14202C;
  --surface-sunken: #101A24;
  --scrim:          rgba(3,8,14,.62);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; /* @kind other */ }
}