/* Hexes Security — UI tokens (v1, 2026-09-16). Import after ../colors/tokens.css.
   Everything here is a decision the product UI should not remake per screen. */

:root {
  /* type */
  --hx-font-heading: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --hx-font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --hx-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --hx-text-xs: 11px;  --hx-lh-xs: 16px;
  --hx-text-sm: 13px;  --hx-lh-sm: 20px;
  --hx-text-md: 14px;  --hx-lh-md: 22px;   /* body default */
  --hx-text-lg: 16px;  --hx-lh-lg: 24px;
  --hx-text-xl: 20px;  --hx-lh-xl: 28px;   /* h3 */
  --hx-text-2xl: 24px; --hx-lh-2xl: 32px;  /* h2 */
  --hx-text-3xl: 32px; --hx-lh-3xl: 40px;  /* h1 */
  --hx-text-display: 44px; --hx-lh-display: 52px;
  --hx-tracking-label: 0.08em;             /* uppercase labels only */

  /* spacing — 4 px base */
  --hx-1: 4px; --hx-2: 8px; --hx-3: 12px; --hx-4: 16px; --hx-5: 20px; --hx-6: 24px; --hx-8: 32px; --hx-10: 40px; --hx-12: 48px; --hx-16: 64px;

  /* radii — squares in the mark are rx 14 %; UI uses restrained radii */
  --hx-r-sm: 4px;   /* chips, inputs, small buttons */
  --hx-r-md: 6px;   /* buttons, cards */
  --hx-r-lg: 10px;  /* panels, modals */
  --hx-r-pill: 999px;

  /* borders & lines */
  --hx-border-w: 1px;
  --hx-focus-ring: 0 0 0 2px var(--hx-bg), 0 0 0 4px var(--hx-accent-strong);

  /* elevation — on dark, elevation is a lighter surface more than a shadow */
  --hx-shadow-sm: 0 1px 2px rgba(3, 12, 14, 0.24);
  --hx-shadow-md: 0 4px 12px rgba(3, 12, 14, 0.32);
  --hx-shadow-lg: 0 12px 32px rgba(3, 12, 14, 0.40);

  /* controls */
  --hx-control-h: 32px;      /* default input / button height (dense product UI) */
  --hx-control-h-lg: 40px;   /* marketing / primary CTAs */
  --hx-icon: 16px;           /* inline icon */
  --hx-icon-lg: 20px;

  /* motion */
  --hx-dur-fast: 120ms; --hx-dur: 200ms; --hx-dur-slow: 320ms;
  --hx-ease: cubic-bezier(0.2, 0, 0, 1);

  /* severity (product) */
  --hx-sev-critical: #F87171;
  --hx-sev-high: #FB923C;
  --hx-sev-medium: #F59E0B;
  --hx-sev-low: #7C9CFF;
  --hx-sev-info: #8FA3B8;
  --hx-ok: #4CDFF0;

  /* data-viz categorical (order matters: 1 = "us / allowed") */
  --hx-viz-1: #4CDFF0; --hx-viz-2: #7C9CFF; --hx-viz-3: #A78BFA; --hx-viz-4: #F59E0B; --hx-viz-5: #F87171; --hx-viz-6: #8FA3B8;
  --hx-viz-grid: rgba(143, 169, 166, 0.18);

  /* layout */
  --hx-rail-w: 56px; --hx-sidebar-w: 240px; --hx-content-max: 1440px; --hx-page-gutter: 24px;
}

/* light theme: shadows soften, elevation returns to shadow */
:root[data-theme="light"] { --hx-shadow-sm: 0 1px 2px rgba(11, 31, 34, 0.06); --hx-shadow-md: 0 4px 12px rgba(11, 31, 34, 0.08); --hx-shadow-lg: 0 12px 32px rgba(11, 31, 34, 0.12); }