/* Hypermedia Report Style — Design Tokens
 * Used by the sales workspace `publish-report` pipeline to render prospect
 * audit sites at <slug>.seo.hypermedia.se. Editorial, consultative vibe.
 */
:root {
  /* Ink scale — text on paper */
  --ink: #0B1220;
  --ink-2: #1C2636;
  --ink-3: #4A5568;
  --ink-muted: #64748B;

  /* Paper scale — backgrounds */
  --paper: #FAFAF7;
  --paper-2: #F1EFEA;
  --paper-3: #E6E3DC;

  /* Rules and hairlines */
  --rule: rgba(11, 18, 32, 0.12);
  --rule-strong: rgba(11, 18, 32, 0.22);

  /* Accent — primary emphasis */
  --accent: #FF5A1F;
  --accent-hover: #E44A12;
  --accent-tint: #FFE4D6;
  --accent-ink: #4A1A00;

  /* Severity scale */
  --sev-critical: #DC2626;
  --sev-critical-bg: #FEE2E2;
  --sev-important: #F59E0B;
  --sev-important-bg: #FEF3C7;
  --sev-minor: #CA8A04;
  --sev-minor-bg: #FEF9C3;
  --sev-nice: #64748B;
  --sev-nice-bg: #E2E8F0;

  /* Lighthouse score bands */
  --score-good: #10B981;
  --score-good-bg: #D1FAE5;
  --score-ok: #F59E0B;
  --score-ok-bg: #FEF3C7;
  --score-bad: #EF4444;
  --score-bad-bg: #FEE2E2;

  /* Typography */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — fluid */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.14vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --fs-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --fs-2xl:  clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --fs-3xl:  clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  --fs-4xl:  clamp(2.75rem, 2.2rem + 2.8vw, 4.5rem);

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Layout */
  --container-max: 1120px;
  --container-prose: 68ch;
  --rail-width: 240px;
  --global-padding: clamp(1.25rem, 4vw, 2.5rem);
  --section-padding: clamp(3rem, 6vw, 6rem);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 4px 14px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 18px 40px -12px rgba(11, 18, 32, 0.18);

  /* Motion */
  --transition: 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z-layers */
  --z-nav: 40;
  --z-modal: 80;
}