/* SGH design tokens: the only :root in the theme and plugins (design audit, 2026-11-10).
   Values follow handoff/work/design-audit/REPORT.md and the SGH Design System. Every other stylesheet
   uses these variables; raw hex values belong here only (handoff/tools/css_gate.py warns otherwise).
   Breakpoints (media queries cannot read variables): 600, 760, 1024, 1280. */
:root {
  color-scheme: light;

  /* Colour: neutrals */
  --ink: #1F2224;
  --charcoal: #494A49;
  --slate: #656A70;
  --paper: #FFFFFF;
  --ground: #F5F3EF;
  --ground-2: #EDEAE4;
  --line: #E4E0D9;
  --line-strong: #C9C5BE;
  /* Colour: dark bands */
  --panel: #232423;
  --panel-2: #2E2F2E;
  --panel-line: #3E3F3D;
  --panel-ink: #EFEDE9;
  --panel-mute: #AEB0AB;
  /* Colour: brand. --orange-press is the only fill for primary actions and orange text. */
  --orange: #EE6A22;
  --orange-press: #B8480B;
  --orange-deep: #9E3D08;
  --orange-tint: #FDF1E9;
  --orange-line: #F3D6C2;
  --focus: #1B6ACB;
  /* Colour: status (text, background, line) */
  --ok: #1E7F4F;
  --ok-bg: #EEF7F1;
  --ok-line: #C9E5D3;
  --warn: #7A5300;
  --warn-bg: #FBF4E4;
  --warn-line: #EBD6A6;
  --error: #A12A22;
  --error-bg: #FDF0EF;
  --error-line: #F0C9C6;
  /* Status marks (the dot in a status badge; text stays --ink): one per tone */
  --mark-ok: #1E7F4F;
  --mark-warn: #C98A00;
  --mark-error: #C4342B;
  --mark-action: #B8480B;
  --mark-neutral: #494A49;
  --mark-muted: #B4AFA7;

  /* Type */
  --display: "Archivo", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(32px, 4.2vw, 50px);
  --fs-h1: clamp(28px, 3vw, 40px);
  --fs-h2: clamp(24px, 2.4vw, 32px);
  --fs-h3: 18px;
  --fs-h4: 15px;
  --fs-body: 15px;
  --lh-body: 1.55;
  --fs-small: 13.5px;
  --fs-micro: 12px;

  /* Radius: 4 media and chips, 8 buttons, cards, inputs and panels, pill for dots and badges only */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-pill: 999px;
  --radius: var(--radius-2);
  --radius-sm: var(--radius-2);

  /* Shadow: two only */
  --shadow-1: 0 8px 24px rgba(30, 30, 28, .07);
  --shadow-2: 0 16px 36px rgba(30, 30, 28, .12);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section: 64px;
  /* Older names still used by sgh-v2.css sections */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;

  /* Size */
  --maxw: 1260px;
  --maxw-text: 760px;
  --btn-sm: 36px;
  --btn-md: 44px;
  --btn-lg: 48px;

  /* Z-index: one value per layer kind */
  --z-sticky: 20;
  --z-bottom-bar: 40;
  --z-header: 50;
  --z-popover: 60;
  --z-drawer: 300;
  --z-modal: 400;

  /* Overlay scrim behind drawers and dialogs */
  --scrim: rgba(20, 20, 18, .45);

  /* Fields (forms, b12): one height, one border, one focus ring */
  --field-h: 44px;
  --field-border: 1.5px;
  /* WooCommerce form variables point at the same values */
  --wc-form-border-color: var(--line-strong);
  --wc-form-border-width: var(--field-border);
  --wc-form-border-radius: var(--radius-2);
  --wc-form-color-text: var(--ink);
  --wc-form-color-background: var(--paper);
  --wc-red: var(--error);
  --wc-green: var(--ok);
}
@media (max-width: 600px) {
  :root { --section: 40px; --s6: 64px; }
}