/* =========================================================================
   Pure Solutions LLC — Design tokens
   Enterprise palette (deep navy, blue, teal, neutral gray) + type, spacing,
   radii, shadows, motion. All values are CSS custom properties so the design
   system stays consistent and easy to maintain.
   ========================================================================= */

:root {
  /* --- Brand scales --- */
  --navy-900: #071a2f;
  --navy-800: #0a2540;
  --navy-700: #0f2f55;
  --navy-600: #123a66;
  --blue-700: #11498f;
  --blue-600: #1559b5;
  --blue-500: #1f6fd6;
  --blue-400: #3b82f6;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-300: #5eead4;

  /* --- Neutrals --- */
  --white: #ffffff;
  --ink: #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;

  /* --- Semantic roles --- */
  --color-bg: var(--white);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-text: var(--ink);
  --color-text-soft: var(--slate-600);
  --color-text-muted: var(--slate-500);
  --color-border: var(--line);
  --color-border-strong: var(--line-strong);

  --color-primary: var(--navy-800);
  --color-primary-hover: var(--navy-700);
  --color-accent: var(--blue-600); /* links / accents on light bg */
  --color-accent-hover: var(--blue-700);
  --color-on-dark: #e8eefb;
  --color-on-dark-soft: #aab9d4;

  --focus: var(--blue-500);
  --focus-ring: 0 0 0 3px rgba(31, 111, 214, 0.45);

  --success: #0f766e;
  --success-bg: #ecfdf5;
  --success-border: #99f6e4;
  --error: #b42318;
  --error-bg: #fef3f2;
  --error-border: #fecdca;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;

  /* --- Typography --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas,
    monospace;

  --fs-display: clamp(2.35rem, 1.55rem + 3.6vw, 4rem);
  --fs-h1: clamp(2.05rem, 1.5rem + 2.6vw, 3.15rem);
  --fs-h2: clamp(1.6rem, 1.28rem + 1.5vw, 2.35rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
  --fs-h4: 1.0625rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Layout --- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.1rem, 0.6rem + 2vw, 2rem);
  --section-y: clamp(3.25rem, 2.2rem + 3.6vw, 6rem);

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 14px rgba(15, 23, 42, 0.07), 0 10px 28px -12px rgba(15, 23, 42, 0.16);
  --shadow-lg: 0 24px 56px -18px rgba(10, 37, 64, 0.28);
  --shadow-focus: var(--focus-ring);

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 360ms;

  /* --- Z-index --- */
  --z-header: 100;
  --z-scrim: 150;
  --z-drawer: 200;
  --z-modal: 1000;
}