/* Self-hosted Inter (variable font, weights 400-800 in one file) instead of
   loading from Google's servers. Removes the googleapis.com -> gstatic.com
   two-hop chain that was the single largest item in the LCP critical path. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('inter-var.woff2') format('woff2');
}

/* A metrics-matched fallback so the fallback font occupies the exact same
   width/height Inter will end up using. Without this, the visible text
   reflows the moment Inter finishes loading (different letter widths),
   which is what was showing up as layout shift on the hero buttons.
   Values are the widely-used, pre-calibrated Inter-vs-Arial overrides. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.64%;
}

:root {
  color-scheme: light;
  --bg-primary: #F6F8FB;
  --bg-secondary: #EDF2F9;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --border: #DBE4EF;
  --border-strong: #C3D0E0;

  --accent-primary: #2563EB;
  --accent-primary-dark: #1D4ED8;
  --accent-secondary: #06B6D4;
  --success: #2ef207;
  --warning: #F59E0B;
  --danger: #ff0008;

  --text-primary: #17212B;
  --text-secondary: #5B6B7D;
  --text-muted: #7C87A6;
  --on-accent: #FFFFFF;

  --gradient-accent: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
  --gradient-glow: radial-gradient(circle at 50% 0%, rgba(37,99,235,0.14) 0%, rgba(37,99,235,0) 60%);
  --header-bg: rgba(246, 248, 251, 0.78);

  --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.375rem; --fs-4xl: 3.25rem;
  --lh-tight: 1.15; --lh-normal: 1.6; --lh-relaxed: 1.7;

  --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;

  --radius-button: 12px; --radius-card: 18px; --radius-input: 12px; --radius-panel: 20px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 8px 24px rgba(16,24,40,0.08);
  --shadow-lg: 0 20px 48px rgba(16,24,40,0.12);
  --shadow-glow-blue: 0 0 0 1px rgba(37,99,235,0.30), 0 10px 32px rgba(37,99,235,0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 400ms;

  --max-width: 1400px;
  --header-height: 72px;

  /* ---------------------------------------------------------------------
     Single source of truth for every embedded tool widget's colors/font.
     Each tool's own <style> block just uses var(--tool-primary) etc.
     directly (no more per-tool color declarations, no more WordPress-
     theme-flavored --global-paletteN fallback chain) — change a value
     here and every tool on the site updates together, in both themes.
  --------------------------------------------------------------------- */
  --tool-primary: var(--accent-primary);
  --tool-primary-text: var(--on-accent);
  --tool-bg: var(--bg-card);
  --tool-surface: var(--bg-secondary);
  --tool-text: var(--text-primary);
  --tool-muted: var(--text-muted);
  --tool-border: var(--border);
  --tool-success: var(--success);
  --tool-warning: var(--warning);
  --tool-danger: var(--danger);
  --tool-font: var(--font-sans);
  --tool-radius: 8px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #0F172A;
  --bg-secondary: #131C2E;
  --bg-card: #162033;
  --bg-card-hover: #1B2740;
  --border: #2C3D57;
  --border-strong: #3D5372;

  --accent-primary: #0adff2;
  --accent-primary-dark: #3B82F6;
  --accent-secondary: #22D3EE;
  --success: #2ef207;
  --warning: #FBBF24;
  --danger: #ff0008;

  --text-primary: #F4F7FB;
  --text-secondary: #9FB1C5;
  --text-muted: #7C87A6;
  --on-accent: #06101F;

  --gradient-accent: linear-gradient(135deg, #60A5FA 0%, #22D3EE 100%);
  --gradient-glow: radial-gradient(circle at 50% 0%, rgba(96,165,250,0.22) 0%, rgba(96,165,250,0) 60%);
  --header-bg: rgba(15, 23, 42, 0.72);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.5);
  --shadow-glow-blue: 0 0 0 1px rgba(96,165,250,0.45), 0 10px 36px rgba(96,165,250,0.35);

  /* Same --tool-* bridge as :root above, re-pointed at this theme's own
     colors — this is what makes every tool's widget re-theme automatically
     when dark mode is toggled, with no per-tool edits needed. */
  --tool-primary: var(--accent-primary);
  --tool-primary-text: var(--on-accent);
  --tool-bg: var(--bg-card);
  --tool-surface: var(--bg-secondary);
  --tool-text: var(--text-primary);
  --tool-muted: var(--text-muted);
  --tool-border: var(--border);
  --tool-success: var(--success);
  --tool-warning: var(--warning);
  --tool-danger: var(--danger);
  --tool-font: var(--font-sans);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-input); }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--text-primary); }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); line-height: 1.2; }
h3 { font-size: var(--fs-2xl); line-height: 1.3; }
h4 { font-size: var(--fs-xl); }
p { color: var(--text-secondary); line-height: var(--lh-relaxed); }

.text-gradient { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-primary); }

.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-6); }
/* Document-style page titles (About, Contact, legal pages, blog posts) intentionally
   render smaller than the hero-style H1 used on the homepage and tool pages. This
   class carries its own mobile step-down since these pages set font-size inline,
   which would otherwise block the bare-tag h1 mobile rule below. */
.doc-h1 { font-size: var(--fs-3xl); }
@media (max-width: 640px) {
  .doc-h1 { font-size: 1.75rem; }
  .container { padding-inline: var(--space-4); }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
}
section { padding-block: var(--space-9); }
@media (max-width: 640px) { section { padding-block: var(--space-7); } }