/* Free-tool shell (light brand). One stylesheet for every tool: the theme's fonts, the brand colours, and the tools' own colour variables mapped to light values (no dark theme).
   Loaded AFTER each tool's own <style>, so these values win. Tokens: docs/app-design/brand-guide.md and the theme's site.css. */
@font-face { font-family: 'Space Grotesk'; font-weight: 300 700; font-style: normal; font-display: swap; src: url('/wp-content/themes/touchtargets/assets/fonts/space-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('/wp-content/themes/touchtargets/assets/fonts/geist-var.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('/wp-content/themes/touchtargets/assets/fonts/geist-mono-var.woff2') format('woff2'); }

:root {
  /* the theme's own tokens (site.css): the header and the footer, which sit in shadow roots, read these from here */
  --teal-deep: #0f766e; --indigo: #4f46e5; --mint: #2dd4bf; --slate: #475569; --border: #e2e8f0; --page: #f7f9fc; --white: #fff;
  --ok-bg: #d1fae5; --ok-fg: #065f46; --warn-bg: #fef3c7; --warn-fg: #92400e; --err-bg: #fee2e2; --err-fg: #b91c1c;
  --gradient: linear-gradient(135deg, #0f766e, #4f46e5); --font-head: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --wrap: 1296px; --gutter: clamp(20px, 5vw, 72px); --radius-lg: 20px;
  /* the tools' common palette (27 of the 31 tool files use these names) */
  --bg: #f7f9fc; --sf: #ffffff; --sf2: #f1f5f9; --sf3: #e2e8f0; --bd: #e2e8f0; --bd2: #cbd5e1;
  --tx: #0b1220; --tx2: #475569; --tx3: #64748b;
  --teal: #0f766e; --td: rgba(13, 148, 136, .10); --tb: rgba(13, 148, 136, .32);
  --pu: #4f46e5; --pd: rgba(79, 70, 229, .08); --pb: rgba(79, 70, 229, .28);
  --or: #b45309; --od: rgba(245, 165, 36, .14); --ob: rgba(180, 83, 9, .30);
  --bl: #2563eb; --bld: rgba(37, 99, 235, .08); --blb: rgba(37, 99, 235, .28);
  --pk: #be185d; --pkd: rgba(190, 24, 93, .08); --pkb: rgba(190, 24, 93, .28);
  --orange: #b45309; --purple: #4f46e5; --teal-dk: #0f766e;
  --red: #b91c1c; --redd: rgba(185, 28, 28, .08); --gn: #047857; --gnd: rgba(4, 120, 87, .08); --amber: #b45309;
  --r: 12px; --fh: 'Space Grotesk', 'Geist', system-ui, sans-serif; --fb: 'Geist', 'Segoe UI', system-ui, sans-serif;
  /* the other names some tools use */
  --panel: #ffffff; --panel-2: #f1f5f9; --card: #ffffff; --card2: #f1f5f9; --chip: #f1f5f9; --chip-line: #e2e8f0; --surface: #ffffff; --surface-2: #f1f5f9;
  --line: #e2e8f0; --border: #e2e8f0; --text: #0b1220; --text-dim: #475569; --muted: #64748b; --dim: #64748b; --ink: #0b1220;
  --accent: #0f766e; --accent-2: #4f46e5; --accent-soft: rgba(13, 148, 136, .10); --btn-text: #ffffff; --warn: #b45309; --fail: #b91c1c; --pass: #047857; --note: #2563eb; --danger: #b91c1c;
  --d: 'Space Grotesk', 'Geist', system-ui, sans-serif; --b: 'Geist', 'Segoe UI', system-ui, sans-serif; --m: 'Geist Mono', ui-monospace, monospace;
  --font-body: 'Geist', 'Segoe UI', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --radius: 12px;
}
html, body { background: #f7f9fc; color: #0b1220; font-family: 'Geist', 'Segoe UI', system-ui, sans-serif; }
body { margin: 0; color-scheme: light; }
.tts-main { min-height: 60vh; padding-top: 96px; }
@media (max-width: 760px) { .tts-main { padding-top: 76px; } }
.tts-chrome { display: block; }
#tts-top { position: sticky; top: 0; z-index: 60; height: 0; }

/* The theme's footer (below) is the only footer: the tools' own copyright and "All tools / Home" lines are hidden. Result and card footers inside a tool are not touched (they have no link to /tools/ and are not a footer element). */
.tts-main footer, .tts-main .site-foot, .tts-main div.foot:has(> span > a[href="/tools/"]) { display: none !important; }

/* sticky header on the tools (the #tts-top host above has no height of its own): in-page links stop below it */
html { scroll-padding-top: 104px; }
@media (max-width: 760px) { html { scroll-padding-top: 80px; } }
/* A tool that hides sideways overflow on both html and body makes body a scroll container, and a sticky header cannot stick inside one. "clip" cuts the overflow the same way without creating a scroll container. */
html, body { overflow-x: clip !important; overflow-y: visible !important; }