/* ==========================================================================
   ToolsVale — Base
   Reset, element defaults, typography, accessibility.
   No component styles here. Uses tokens.css only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tv-header-h) + var(--tv-space-6));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--tv-canvas);
  /* Hero wash — fixed so it does not repeat down long pages. */
  background-image: radial-gradient(
    120% 70% at 50% -10%,
    var(--tv-violet-050) 0%,
    rgba(244, 242, 249, .55) 42%,
    rgba(250, 249, 252, 0) 72%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: var(--tv-text);
  font-family: var(--tv-font-body);
  font-size: var(--tv-fs-base);
  line-height: var(--tv-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--tv-border);
  margin: var(--tv-space-8) 0;
}

::selection {
  background: var(--tv-selection);
  color: var(--tv-text);
}


/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tv-font-display);
  font-weight: var(--tv-fw-semibold);
  line-height: var(--tv-lh-heading);
  letter-spacing: var(--tv-ls-display);
  color: var(--tv-text);
  text-wrap: balance;
}

h1 { font-size: var(--tv-fs-4xl); line-height: var(--tv-lh-display); }
h2 { font-size: var(--tv-fs-3xl); }
h3 { font-size: var(--tv-fs-h3);  letter-spacing: var(--tv-ls-tight); }
h4 { font-size: var(--tv-fs-h4);  letter-spacing: var(--tv-ls-tight); }
h5 { font-size: var(--tv-fs-h5);  letter-spacing: var(--tv-ls-tight); }
h6 { font-size: var(--tv-fs-h6);  letter-spacing: var(--tv-ls-normal); }

p { text-wrap: pretty; }

a {
  color: var(--tv-primary);
  text-decoration: none;
  transition: color var(--tv-dur) var(--tv-ease);
}

a:hover { color: var(--tv-primary-hover); }

strong, b { font-weight: var(--tv-fw-semibold); }

small { font-size: var(--tv-fs-small); }

code, kbd, samp, pre {
  font-family: var(--tv-font-mono);
  font-size: 0.9em;
}

code {
  background: var(--tv-surface-sunken);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-xs);
  padding: 2px 6px;
}

pre {
  background: var(--tv-surface-sunken);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  padding: var(--tv-space-5);
  overflow-x: auto;
}

pre code { background: none; border: 0; padding: 0; }

blockquote {
  border-left: 2px solid var(--tv-gold);
  padding-left: var(--tv-space-5);
  color: var(--tv-text-soft);
}


/* --------------------------------------------------------------------------
   3. ACCESSIBILITY
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--tv-primary-hover);
  outline-offset: 2px;
  border-radius: var(--tv-radius-xs);
}

/* Only suppress the ring for genuine mouse users. */
:focus:not(:focus-visible) { outline: none; }

.tv-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tv-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--tv-z-toast);
  background: var(--tv-surface);
  color: var(--tv-text);
  border: 1px solid var(--tv-border-strong);
  border-radius: var(--tv-radius-sm);
  padding: var(--tv-space-3) var(--tv-space-5);
  font-weight: var(--tv-fw-medium);
  box-shadow: var(--tv-shadow);
}

.tv-skip-link:focus {
  left: var(--tv-space-4);
  top: var(--tv-space-3);
}

[hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   4. PROSE
   Long-form article body — the SEO content under each tool, blog posts,
   and the legal pages. Scoped so it never leaks into component markup.
   -------------------------------------------------------------------------- */

.tv-prose {
  font-size: var(--tv-fs-body);
  line-height: var(--tv-lh-relaxed);
  color: var(--tv-text-soft);
  max-width: var(--tv-measure);
}

.tv-prose > * + * { margin-top: var(--tv-space-5); }

.tv-prose h2 {
  font-size: var(--tv-fs-h2);
  color: var(--tv-text);
  margin-top: var(--tv-space-12);
}

.tv-prose h3 {
  font-size: var(--tv-fs-h4);
  color: var(--tv-text);
  margin-top: var(--tv-space-10);
}

.tv-prose h4 {
  font-size: var(--tv-fs-h6);
  color: var(--tv-text);
  margin-top: var(--tv-space-8);
}

/* First heading in a prose block should not push away from its container. */
.tv-prose > :first-child { margin-top: 0; }

.tv-prose a {
  color: var(--tv-primary);
  text-decoration: underline;
  text-decoration-color: var(--tv-border-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.tv-prose a:hover { text-decoration-color: var(--tv-primary-hover); }

.tv-prose ul,
.tv-prose ol { padding-left: var(--tv-space-6); }

.tv-prose ul li { list-style: disc; }
.tv-prose ol li { list-style: decimal; }
.tv-prose li::marker { color: var(--tv-text-muted); }
.tv-prose li + li { margin-top: var(--tv-space-2); }

.tv-prose img {
  border-radius: var(--tv-radius);
  border: 1px solid var(--tv-border);
}

.tv-prose figcaption {
  font-size: var(--tv-fs-small);
  color: var(--tv-text-muted);
  margin-top: var(--tv-space-2);
}

.tv-prose table {
  font-size: var(--tv-fs-small);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  overflow: hidden;
}

.tv-prose th,
.tv-prose td {
  text-align: left;
  padding: var(--tv-space-3) var(--tv-space-4);
  border-bottom: 1px solid var(--tv-border);
}

.tv-prose th {
  font-family: var(--tv-font-mono);
  font-size: var(--tv-fs-eyebrow);
  letter-spacing: var(--tv-ls-mono);
  text-transform: uppercase;
  color: var(--tv-text-muted);
  background: var(--tv-surface-sunken);
  font-weight: var(--tv-fw-medium);
}

.tv-prose tr:last-child td { border-bottom: 0; }


/* --------------------------------------------------------------------------
   5. PRINT
   Tool UI and navigation are meaningless on paper; content is not.
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; }

  .tv-site-header,
  .tv-site-footer,
  .tv-tool-app,
  .tv-palette,
  .tv-community,
  .tv-skip-link { display: none !important; }

  .tv-prose { max-width: none; color: #000; }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}