/* Shared visual foundation for public tools. No app framework styles. */
:root {
  --tool-bg: #050810;
  --tool-hero-bg: #030712;
  --tool-editor-bg: #0a0d14;
  --tool-card: #11151f;
  --tool-panel: rgba(255, 255, 255, 0.04);
  --tool-border: rgba(255, 255, 255, 0.12);
  --tool-heading: #fff;
  --tool-text: #c8ccd4;
  --tool-muted: #969eae;
  --tool-accent: #f17175;
  --tool-primary: #c71f0d;
  --tool-primary-light: #d62916;
  --tool-primary-hover: #a01808;
  --tool-primary-gradient: linear-gradient(135deg, var(--tool-primary), var(--tool-primary-light));
  --tool-primary-gradient-hover: linear-gradient(135deg, var(--tool-primary-hover), var(--tool-primary));
  --tool-card-radius: 14px;
  --tool-button-radius: 8px;
  --tool-hero-gradient:
    radial-gradient(at 20% 30%, rgba(59, 130, 246, .18), transparent 50%),
    radial-gradient(at 80% 70%, rgba(139, 92, 246, .20), transparent 50%),
    radial-gradient(at 50% 50%, rgba(16, 185, 129, .10), transparent 50%),
    radial-gradient(at 40% 80%, rgba(251, 191, 36, .16), transparent 50%),
    radial-gradient(at 90% 20%, rgba(252, 211, 77, .12), transparent 45%);
  --tool-title-gradient: linear-gradient(120deg, #93c5fd, #fca5a5 45%, #fde68a);
}

.tool-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--tool-button-radius);
  background: var(--tool-primary-gradient);
  color: #fff;
  font: 500 1rem/1.5 'Roboto Flex', sans-serif;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(199, 31, 13, .3);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tool-primary-button:hover {
  background: var(--tool-primary-gradient-hover);
  box-shadow: 0 4px 12px rgba(199, 31, 13, .4);
  transform: translateY(-1px);
  text-decoration: none;
}
.tool-primary-button:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}
.tool-card {
  background: var(--tool-card);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-card-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -16px rgba(0, 0, 0, .6);
}