/* Onepercent Tool Lab theme bridge.
   Light and dark utilities stay readable instead of being flattened into one palette. */
:root {
  --onepercent-blue: #0070f3;
  --onepercent-cyan: #06b6d4;
  --onepercent-ink: #0f172a;
  --onepercent-muted: #475569;
  --onepercent-surface: #ffffff;
  --onepercent-canvas: #f7f9fc;
  --onepercent-border: #cbd5e1;
  color-scheme: light;
}

html,
body {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden !important;
}

html[data-onepercent-theme="light"],
html:not([data-onepercent-theme]) {
  color-scheme: light;
  background: var(--onepercent-canvas) !important;
  color: var(--onepercent-ink) !important;
}

html[data-onepercent-theme="light"] body,
html:not([data-onepercent-theme]) body {
  background: var(--onepercent-canvas) !important;
  background-image: radial-gradient(circle at 92% 0%, rgba(0, 112, 243, 0.08), transparent 24rem) !important;
  color: var(--onepercent-ink) !important;
}

/* Keep the original dark workspace surfaces intact for animation and editing tools. */
html[data-onepercent-theme="dark"] {
  color-scheme: dark;
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

html[data-onepercent-theme="dark"] body {
  background: #0f172a !important;
  background-image: radial-gradient(circle at 92% 0%, rgba(59, 130, 246, 0.12), transparent 24rem) !important;
  color: #e2e8f0 !important;
}

html[data-onepercent-theme="dark"] button:disabled {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #cbd5e1 !important;
  opacity: 0.9;
}

/* Light tools: align the strongest actions with the company blue without touching translucent states. */
html[data-onepercent-theme="light"] [class~="bg-indigo-600"],
html[data-onepercent-theme="light"] [class~="bg-blue-600"],
html[data-onepercent-theme="light"] [class~="bg-brand-600"] {
  background-color: var(--onepercent-blue) !important;
}

html[data-onepercent-theme="light"] [class~="bg-indigo-500"],
html[data-onepercent-theme="light"] [class~="bg-blue-500"],
html[data-onepercent-theme="light"] [class~="bg-brand-500"] {
  background-color: #1683f7 !important;
}

html[data-onepercent-theme="light"] [class~="text-indigo-600"],
html[data-onepercent-theme="light"] [class~="text-blue-600"],
html[data-onepercent-theme="light"] [class~="text-brand-600"] {
  color: var(--onepercent-blue) !important;
}

html[data-onepercent-theme="light"] [class~="border-indigo-600"],
html[data-onepercent-theme="light"] [class~="border-blue-600"],
html[data-onepercent-theme="light"] [class~="border-brand-600"] {
  border-color: rgba(0, 112, 243, 0.36) !important;
}

/* Animation dictionary light mode. The default remains dark, but the toggle can switch here. */
html[data-onepercent-theme="light"] header,
html[data-onepercent-theme="light"] [class*="bg-zinc-950"],
html[data-onepercent-theme="light"] [class*="bg-zinc-900"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-onepercent-theme="light"] [class*="bg-zinc-800"] {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-onepercent-theme="light"] [class*="text-zinc-100"],
html[data-onepercent-theme="light"] [class*="text-zinc-200"] {
  color: #0f172a !important;
}

html[data-onepercent-theme="light"] [class*="text-zinc-300"],
html[data-onepercent-theme="light"] [class*="text-zinc-400"],
html[data-onepercent-theme="light"] [class*="text-zinc-500"] {
  color: #475569 !important;
}

html[data-onepercent-theme="light"] [class*="border-zinc-700"],
html[data-onepercent-theme="light"] [class*="border-zinc-800"],
html[data-onepercent-theme="light"] [class*="border-zinc-900"] {
  border-color: #cbd5e1 !important;
}

html[data-onepercent-theme="light"] .bg-grid {
  background-image: radial-gradient(rgba(0, 112, 243, 0.18) 1px, transparent 1px) !important;
}

/* Form controls belong to the active theme. */
html[data-onepercent-theme="light"] input,
html[data-onepercent-theme="light"] select,
html[data-onepercent-theme="light"] textarea,
html:not([data-onepercent-theme]) input,
html:not([data-onepercent-theme]) select,
html:not([data-onepercent-theme]) textarea {
  background-color: var(--onepercent-surface) !important;
  border-color: #cbd5e1 !important;
  color: var(--onepercent-ink) !important;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--onepercent-blue) !important;
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #eef3f8 !important;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #eef3f8;
  border-radius: 999px;
  background: #94a3b8 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--onepercent-blue) !important;
}

html[data-onepercent-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f172a !important;
}

html[data-onepercent-theme="dark"] ::-webkit-scrollbar-thumb {
  border-color: #0f172a;
  background: #475569 !important;
}

html[data-onepercent-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #60a5fa !important;
}

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