/* Heatsink app design tokens: the Vistazo treatment (white cards on a gray field, 12px seams), light even though
   the marketing site matches it (docs/design.md, "UI shell"). Ink is black: colour is reserved for the logo, whose navy
   lives in Logo.razor.css; accent is the logo's copper (cloud/marketing/src/brand/logo-v3.svg). Frozen: a component that needs a missing token defines it in its own
   .razor.css with a note. One exception, the dated mobile block at the end (docs/design.md, "UI shell", 2026-11-02):
   the phone shell's geometry and layers, which several components share. */
:root {
  /* Colour */
  --hs-field: #f3f4f6;
  --hs-card: #fff;
  --hs-surface-2: #f9fafb;
  --hs-hover: #f3f4f6;
  --hs-line: #e5e7eb;
  --hs-line-2: #d1d5db;
  --hs-text: #111827;
  --hs-text-2: #374151;
  --hs-muted: #6b7280;
  --hs-muted-2: #9ca3af;
  --hs-ink: #0a0a0a;
  --hs-ink-hover: #262626;
  --hs-accent: #cf714d;
  --hs-accent-soft: #faf1ed;
  --hs-hot: #f97316;
  --hs-danger: #dc2626;
  --hs-success: #16a34a;
  --hs-avatar: #c7d2fe;

  /* The panel strip is black because the real screen is. */
  --hs-panel-bg: #05060a;
  --hs-panel-edge: #2b303b;
  --hs-panel-bezel: #111318;
  --hs-canvas-a: #f3f4f6;
  --hs-canvas-b: #fafafa;

  /* Type */
  --hs-font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hs-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --hs-text-xs: 11px;
  --hs-text-sm: 12px;
  --hs-text-md: 13px;
  --hs-text-lg: 15px;

  /* Radii */
  --hs-r-sm: 6px;
  --hs-r-md: 8px;
  --hs-r-lg: 12px;
  --hs-r-xl: 16px;

  /* Shell geometry (Vistazo SidebarFrame: 288px nav or 56px rail, plus the 12px frame and the card's borders). */
  --hs-gutter: 12px;
  --hs-crumbs-h: 40px;
  --hs-agent-w: 380px;
  --hs-nav-open-w: 302px;
  --hs-nav-rail-w: 70px;
  --hs-nav-header-h: 56px;

  /* Motion. The nav opens faster than it closes; labels fade out at once and fade in only once the frame has
     mostly widened, so text never reflows inside a moving box. */
  --hs-expand-ms: 150ms;
  --hs-expand-ease: ease-out;
  --hs-collapse-ms: 200ms;
  --hs-collapse-ease: ease-in;
  --hs-fade-out-ms: 80ms;
  --hs-fade-in-ms: 120ms;
  --hs-fade-in-delay: 160ms;

  /* Shadows */
  --hs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --hs-shadow-md: 0 4px 12px rgba(17, 24, 39, .08);
  --hs-shadow-menu: 0 8px 24px rgba(17, 24, 39, .12);
  --hs-shadow-modal: 0 24px 64px rgba(17, 24, 39, .24);
  --hs-shadow-panel: 0 0 0 6px var(--hs-panel-bezel), 0 16px 40px rgba(17, 24, 39, .25);

  /* Layers */
  --hs-z-nav: 10;
  --hs-z-menu: 50;
  --hs-z-modal: 70;
  --hs-z-toast: 80;

  /* Mobile shell (2026-11-02; docs/design.md "UI shell", mobile IA). Below 768px (max-width: 767px, literal in every
     @media, since a custom property can't be used in a media query) the shell is a fixed top bar, a title row and a
     bottom tab bar, ported from Vistazo's phone shell. Geometry: */
  --hs-topbar-h: 56px;
  --hs-tabbar-h: 64px;
  --hs-touch: 40px;
  --hs-drawer-w: 288px;
  /* Phone layers, all below menus (50), modals (70) and toasts (80), so a menu opened inside a panel stays on top. */
  --hs-z-panel: 30;
  --hs-z-tabbar: 40;
  --hs-z-mobile-settings: 42;
  --hs-z-topbar: 45;
  --hs-z-scrim: 46;
  --hs-z-drawer: 47;
}