/* ============================================================
   TOOLSHUB4U — TEXT CORE: tokens.css
   Design tokens scoped under .tt-tool (text tool namespace).
   ============================================================ */
.tt-tool {
  --tt-primary: #6366f1;
  --tt-primary-hover: #4f46e5;
  --tt-primary-light: #818cf8;
  --tt-success: #10b981;
  --tt-warning: #f59e0b;
  --tt-danger: #ef4444;

  --tt-bg: var(--ct-input-bg, #131d33);
  --tt-bg-card: var(--ct-card-bg, rgba(14, 22, 38, .92));
  --tt-border: var(--ct-input-border, rgba(148, 163, 184, .18));
  --tt-text: var(--ct-text, #e7ecf5);
  --tt-text-secondary: var(--ct-text-secondary, #9aa8bd);
  --tt-text-muted: var(--ct-text-muted, #64748b);

  --tt-radius-sm: 8px;
  --tt-radius-md: 12px;
  --tt-radius-lg: 16px;

  --tt-space-xs: 4px;
  --tt-space-sm: 8px;
  --tt-space-md: 16px;
  --tt-space-lg: 24px;
  --tt-space-xl: 32px;

  --tt-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --tt-focus-ring: 0 0 0 4px rgba(99, 102, 241, .25);
}

/* Visible focus for keyboard users */
.tt-tool :focus-visible {
  outline: none;
  box-shadow: var(--tt-focus-ring);
  border-radius: var(--tt-radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tt-tool *,
  .tt-tool *::before,
  .tt-tool *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Screen-reader-only utility */
.tt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}