/* ========================================
   Strategic Messaging Review — Shared CSS
   Roloff Consulting
   ======================================== */

:root {
  /* ====== Colors ====== */
  --ink: #0e1117;
  --ink-mid: #3a3f4b;
  --ink-light: #7a8195;

  --bg: #f4f2ee;
  --bg-card: #faf9f6;
  --bg-white: #ffffff;
  --bg-subtle: #f5f4f0;

  --accent: #1a4fcc;
  --accent-light: #7a9fff;
  --accent-hover: #1440aa;
  --accent-subtle: #e8eeff;
  --accent-border: #b8cafe;

  /* Status colors */
  --high: #c0392b;
  --high-bg: #fdf0ef;
  --high-border: #e8a8a3;

  --med: #d4820a;
  --med-bg: #fdf6e8;
  --med-border: #e8cea0;

  --low: #1a7a4a;
  --low-bg: #edf9f3;
  --low-border: #a0dfc0;

  --none: #276221;
  --none-bg: #dff5e8;
  --none-border: #7ecba0;

  /* ====== Borders & Shadows ====== */
  --border: #ddd9d0;
  --border-light: rgba(255, 255, 255, 0.15);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --shadow: 0 2px 12px rgba(14, 17, 23, 0.07);
  --shadow-lg: 0 10px 36px rgba(14, 17, 23, 0.12);

  /* ====== Typography ====== */
  --mono: 'DM Mono', monospace;
  --display: 'Plus Jakarta Sans', sans-serif;

  /* ====== Spacing ====== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 72px;
  --space-5xl: 80px;
  --space-6xl: 96px;

  /* ====== Sizing ====== */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-full: 9999px;

  /* ====== Layout ====== */
  --container-sm: 400px;
  --container-md: 560px;
  --container-lg: 980px;
  --container-xl: 1000px;
  --header-padding-inline: 40px;
  --main-padding-inline: 40px;

  /* ====== Transitions ====== */
  --transition-fast: 0.15s;
  --transition: 0.18s;
  --transition-slow: 0.25s;

  /* ====== Font Sizes ====== */
  --text-xs: 9px;
  --text-sm: 10px;
  --text-sm-md: 11px;
  --text-md: 12px;
  --text-md-lg: 13px;
  --text-lg: 14px;
  --text-lg-xl: 15px;
  --text-xl: 16px;
  --text-2xl: 17px;
  --text-3xl: 19px;
  --text-4xl: 22px;
  --text-5xl: 24px;
  --text-6xl: 26px;
  --text-hero: 44px;

  /* ====== Font Weights ====== */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ====== Letter Spacing ====== */
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.06em;
  --tracking-ultra: 0.08em;
  --tracking-mega: 0.1em;
  --tracking-ultra-mega: 0.12em;
  --tracking-super-mega: 0.14em;
  --tracking-extreme: 0.18em;
  --tracking-ultimate: 0.2em;
  --tracking-final: 0.22em;

  /* ====== Line Heights ====== */
  --leading-tight: 1.1;
  --leading-snug: 1.12;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.72;
  --leading-looser: 1.75;

  /* ====== Z-Index ====== */
  --z-toast: 999;
  --z-modal: 100;
}

/* ====== Utility Classes ====== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====== Base Reset ====== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--display);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: var(--leading-relaxed);
}

/* ====== Focus Styles ====== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ====== Selection ====== */
::selection {
  background: var(--accent-subtle);
  color: var(--ink);
}