/* Shared design constants. Breakpoints: compact = 700px, narrow = 420px.
   Native media queries cannot consume var(); those two literals are audited exceptions.
   Unitless grid fractions, 0/100% geometry and image data are structural, not design tokens. */
:root {
  color-scheme: light;
  --logo-accent: #a4ebd8;
  --paper: #f5f8fa;
  --paper-white: #ffffff;
  --paper-subtle: #edf3f5;
  --ink-dark: #162b36;
  --ink-soft: #526570;
  --rule: #d8e2e7;
  --teal: #08776b;
  --teal-dark: #075e55;
  --teal-pale: #e6f5f1;
  --green: #246345;
  --green-pale: #edf7f0;
  --rust: #90501d;
  --rust-pale: #fff4e8;
  --red: #ad3434;
  --white: #ffffff;
  --overlay: rgb(22 43 54 / 45%);
  --focus-color: #08776b;
  --art-sage: #6eaaa1;
  --art-pine: #174f4b;
  --art-cream: #d1efe5;
  --bg: var(--paper);
  --surface: var(--paper-white);
  --surface-2: var(--paper-subtle);
  --ink: var(--ink-dark);
  --muted: var(--ink-soft);
  --line: var(--rule);
  --brand: var(--teal);
  --brand-hover: var(--teal-dark);
  --action-bg: var(--teal-pale);
  --good: var(--green);
  --good-bg: var(--green-pale);
  --warn: var(--rust);
  --warn-bg: var(--rust-pale);
  --error: var(--red);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --type-xs: 12px;
  --type-sm: 14px;
  --type-base: 16px;
  --type-lg: 18px;
  --type-subtitle: 22px;
  --type-h2: clamp(25px, 3vw, 34px);
  --type-h1: clamp(32px, 5vw, 52px);
  --type-metric: clamp(26px, 3vw, 38px);
  --leading-body: 1.6;
  --leading-tight: 1.15;
  --leading-ui: 1.4;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --tracking-heading: -.04em;
  --tracking-label: .08em;
  --radius: 10px;
  --radius-round: 50%;
  --border: 1px;
  --border-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 4px;
  --duration-fast: 140ms;
  --ease-ui: ease-out;
  --disabled-opacity: .48;
  --shell-width: 1120px;
  --reading-width: 760px;
  --copy-width: 64ch;
  --page-gutter: var(--space-6);
  --button-height: 44px;
  --nav-height: 72px;
  --brand-icon: 30px;
  --scroll-offset: var(--space-6);
  --drop-height: 284px;
  --preview-height: 360px;
  --preview-min-height: 180px;
  --ruler-height: 8px;
  --grid-dot: 1px;
  --grid-pitch: var(--space-4);
  --panel-pad: var(--space-6);
  --crop-display-max-width: 520px;
  --crop-display-max-height: 360px;
  --crop-display-fallback: 320px;
  --crop-display-min-width: 160px;
  --crop-handle: 16px;
  --crop-handle-offset: -8px;
  --crop-mask-shadow: 0 0 0 999px var(--overlay);
  --crop-rule-position: 33.333%;
  --copy-min-height: 116px;
  --thumbnail-width: 160px;
  --logo-large: 72px;
  --viewport-height: 100vh;
  --sample-title-font: 600 86px sans-serif;
  --sample-label-font: 500 36px monospace;
}