/* Surface Wolf — Design tokens (ported verbatim from design-reference/tokens/*).
   Fonts are enqueued separately (Google Fonts) in functions.php. */
:root {
  /* ---- Color: base neutrals ---- */
  --sw-black:      #000000;
  --sw-ink-900:    #0E0E0E;
  --sw-ink-800:    #1C1C1C;
  --sw-ink-700:    #262626;
  --sw-off-white:  #F5F5F5;
  --sw-white:      #FFFFFF;
  --sw-steel-500:  #8A8A8A;
  --sw-steel-300:  #D8D8D8;
  --sw-line:       #E2E2E2;

  /* ---- Color: accent (use sparingly) ---- */
  --sw-orange:        #FA3D02;
  --sw-orange-hover:  #FF5A26;
  --sw-orange-press:  #C5310A;
  --sw-orange-deep:   #A82905;
  --sw-orange-tint:   #FFF1EC;

  /* ---- Color: semantic aliases ---- */
  --sw-bg:            var(--sw-off-white);
  --sw-bg-dark:       var(--sw-black);
  --sw-surface:       var(--sw-white);
  --sw-surface-dark:  var(--sw-ink-900);
  --sw-text:          var(--sw-ink-900);
  --sw-text-muted:    var(--sw-steel-500);
  --sw-text-inverse:  var(--sw-white);
  --sw-accent:        var(--sw-orange);
  --sw-accent-hover:  var(--sw-orange-hover);
  --sw-accent-press:  var(--sw-orange-press);
  --sw-border:        var(--sw-line);
  --sw-border-strong: var(--sw-black);
  --sw-disabled-bg:   #E0E0E0;
  --sw-disabled-fg:   #A5A5A5;
  --sw-focus-ring:    rgba(250, 61, 2, 0.25);
  --sw-focus-ring-inverse: rgba(255, 255, 255, 0.70);

  /* ---- Typography ---- */
  --sw-font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --sw-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --sw-font-mono:    'DM Mono', ui-monospace, monospace;
  --sw-weight-regular:  400;
  --sw-weight-medium:   500;
  --sw-weight-semibold: 600;
  --sw-weight-bold:     700;
  --sw-weight-extra:    800;
  --sw-weight-black:    900;
  --sw-display-xl: 96px;
  --sw-display-lg: 64px;
  --sw-display-md: 48px;
  --sw-display-sm: 34px;
  --sw-display-xs: 22px;
  --sw-text-xl:   22px;
  --sw-text-lg:   18px;
  --sw-text-base: 16px;
  --sw-text-sm:   14px;
  --sw-text-xs:   12px;
  --sw-leading-tight: 0.9;
  --sw-leading-snug:  1.2;
  --sw-leading-body:  1.65;
  --sw-tracking-display: -0.01em;
  --sw-tracking-eyebrow: 0.3em;
  --sw-tracking-button:  0.08em;
  --sw-tracking-badge:   0.14em;

  /* ---- Spacing (8px base) ---- */
  --sw-space-1:  4px;
  --sw-space-2:  8px;
  --sw-space-3:  16px;
  --sw-space-4:  24px;
  --sw-space-5:  40px;
  --sw-space-6:  72px;
  --sw-space-7:  120px;
  --sw-gutter: var(--sw-space-6);
  --sw-section-y: var(--sw-space-7);

  /* ---- Radius ---- */
  --sw-radius-tile:   2px;
  --sw-radius-button: 4px;
  --sw-radius-badge:  3px;
  --sw-radius-card:   8px;
  --sw-radius-pill:   100px;

  /* ---- Elevation ---- */
  --sw-shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --sw-shadow-e2: 0 6px 18px rgba(0, 0, 0, 0.12);
  --sw-shadow-e3: 0 18px 50px rgba(0, 0, 0, 0.22);
  --sw-glow-light: 0 6px 16px rgba(250, 61, 2, 0.30);
  --sw-glow-dark:  0 6px 20px rgba(250, 61, 2, 0.45);

  /* ---- Responsive page gutter (consumed as var(--g), from homepage <style>) ---- */
  --g: max(72px, calc((100vw - 1360px) / 2));
}
@media (max-width: 1024px) { :root { --g: 40px; } }
@media (max-width: 640px)  { :root { --g: 20px; } }