/* Shared layout geometry for employee home and workroom surfaces.
   Colors and type stay per-surface. These tokens keep logo, header,
   gutters, tap targets and content bottoms on one grid.
   See docs/design/layout-tokens.md. */

:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Page gutters: same horizontal inset for header and content */
  --layout-gutter: clamp(12px, 3vw, 28px);
  --layout-gutter-wide: clamp(32px, 3vw, 48px);

  /* Header band: fits the 64px ink brand mark plus vertical pad.
     The mark is not a black badge tile; see brand-shell.css. */
  --layout-header-height: 88px;
  --layout-header-pad-block: var(--space-3);
  --layout-badge: 64px;

  /* Content widths */
  --layout-shell-max: 1600px;
  --layout-content-max: 1400px;
  --layout-panel-max: 1200px;
  --layout-form-max: 900px;
  --layout-gate-max: 720px;

  /* Controls */
  --layout-tap: 48px;
  --layout-control: 40px;

  /* Compatibility aliases used by existing employee-home rules */
  --space: var(--space-4);
  --tap: var(--layout-tap);
  --badge: var(--layout-badge);
}

/* Shared width helpers — prefer these over inline max-width styles */
.main-narrow {
  max-width: var(--layout-form-max);
  margin-inline: auto;
}

.main-panel {
  max-width: var(--layout-panel-max);
  margin-inline: auto;
}

/* Narrow chrome from the crisp-logo header: shorter band, 54px mark.
   Desktop values above stay the default. Wordmark type stays in brand-shell.css. */
@media (max-width: 620px) {
  :root {
    --layout-header-height: 80px;
    --layout-header-pad-block: 0.7rem;
    --layout-badge: 54px;
  }
}