/* ============================================================
   HardByte — Spacing, radii, borders, layout
   8px base grid. Tight, engineered rhythm.
   ============================================================ */

:root {
  /* Spacing scale (8px base, with 2/4 half-steps) */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-14: 112px;
  --space-16: 160px;

  /* Radii — restrained. The brand is square-cornered (chip).
     Hardware reads crisp, so radii stay small. */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Border widths */
  --border-w: 1px;
  --border-w-2: 1.5px;
  --border-w-3: 2px;

  /* Control heights — one scale for every control (D13): a size name is
     the same height in Button, IconButton, Input, SegmentedControl and
     TextLink. 48 is the touch floor; 56 the pointer tier's main action and
     64 the touch screen's (D11). */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --control-xl: 56px;
  --control-touch: 64px;

  /* Icon sizes (D15): 16 in the smallest controls and inline with small
     text, 20 in most controls, 24 in the large ones (xl, touch). Lucide
     writes 24px onto every icon it mounts, so a component sizes its box. */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* Layout */
  --container-max: 1200px;
  --container-prose: 720px;
  --topbar-h: 56px;

  /* The website's frame, read from its main: the page's width, the gutter
     beside it, the header's height and a section's padding. Each takes a
     compact step at --bp-xl (1366) and below, in the query at the end of
     this file. --page-max grows with the viewport between its two ends. */
  --page-max: clamp(1200px, max(calc(63vw + 293px), calc(78.9vw - 114px)), 2600px);  /* @kind spacing */
  --gutter: var(--space-9);
  --nav-h: 68px;
  --section-pad: 92px;

  /* Breakpoints (D15, D22) — the website's series, where most layouts
     already break. A custom property cannot stand in a media query, so a
     query writes the number of one of these and nothing else:
     @media (max-width: 679px) is below md, (min-width: 680px) from md on. */
  --bp-sm: 560px;
  --bp-md: 680px;
  --bp-lg: 1000px;
  --bp-xl: 1366px;
  --bp-2xl: 1800px;
  --bp-3xl: 2400px;

  /* Layers (D15, D23) — one ladder for everything that stacks. The bar
     stays above every overlay, so on a shared device the sign-out is
     always in reach; overlays begin below it. */
  --layer-raised: 1;      /* @kind other */  /* sticky table heads and columns, inside content */
  --layer-dropdown: 20;   /* @kind other */  /* menus, popovers, autocomplete lists */
  --layer-overlay: 100;   /* @kind other */  /* dialogs, result states, loading overlays */
  --layer-bar: 140;       /* @kind other */  /* the app bar */
  --layer-toast: 150;     /* @kind other */  /* transient messages */
  --layer-skip: 300;      /* @kind other */  /* the skip link, above everything when focused */
}

/* The website's compact desktop: --bp-xl (1366) and below. */
@media (max-width: 1366px) {
  :root {
    --page-max: clamp(820px, 78vw, 1010px);  /* @kind spacing */
    --gutter: 28px;
    --nav-h: 58px;
    --section-pad: var(--space-11);
  }
}