/* Quokka Labs Tools — light-first utility-workshop theme. */
:root {
  color-scheme: light;
  --q-page: #f6f7f5;
  --q-surface: #ffffff;
  --q-surface-soft: #eef3f2;
  --q-surface-raised: #ffffff;
  --q-ink: #172334;
  --q-muted: #526174;
  --q-subtle: #5b6878;
  --q-border: #d8dee5;
  --q-control-border: #778496;
  --q-action: #0b625f;
  --q-action-hover: #084d4a;
  --q-action-soft: #e5f2f0;
  --q-focus: #2457c5;
  --q-success: #176b45;
  --q-success-soft: #e8f5ed;
  --q-warning: #704600;
  --q-warning-soft: #fff3d2;
  --q-danger: #9b1c31;
  --q-danger-soft: #fde8eb;
  --gt-bg: var(--q-page);
  --gt-bg-soft: var(--q-surface-soft);
  --gt-panel: var(--q-surface);
  --gt-panel-strong: var(--q-surface);
  --gt-line: var(--q-border);
  --gt-line-strong: var(--q-control-border);
  --gt-text: var(--q-ink);
  --gt-muted: var(--q-muted);
  --gt-subtle: var(--q-subtle);
  --gt-accent: var(--q-action);
  --gt-accent-strong: var(--q-action-hover);
  --gt-accent-soft: var(--q-action-soft);
  --gt-success: var(--q-success);
  --gt-success-soft: var(--q-success-soft);
  --gt-warning: var(--q-warning);
  --gt-warning-soft: var(--q-warning-soft);
  --gt-danger: var(--q-danger);
  --gt-danger-soft: var(--q-danger-soft);
  --gt-shadow: 0 14px 36px rgba(23, 35, 52, 0.08);
}

body[data-quokka-theme="light"] {
  min-width: 320px;
  min-height: 100vh;
  color: var(--q-ink);
  background: var(--q-page);
  color-scheme: light;
}

body[data-quokka-theme="light"] .bg-slate-900,
body[data-quokka-theme="light"] .bg-slate-950,
body[data-quokka-theme="light"] .bg-gray-900,
body[data-quokka-theme="light"] .hero-gradient {
  color: var(--q-ink);
  background: var(--q-page);
}

body[data-quokka-theme="light"] .bg-slate-800,
body[data-quokka-theme="light"] .bg-slate-700,
body[data-quokka-theme="light"] .bg-slate-800\/50,
body[data-quokka-theme="light"] .bg-slate-800\/80,
body[data-quokka-theme="light"] .bg-slate-800\/95,
body[data-quokka-theme="light"] .bg-slate-900\/50,
body[data-quokka-theme="light"] .bg-slate-900\/80,
body[data-quokka-theme="light"] .bg-slate-900\/95,
body[data-quokka-theme="light"] .bg-slate-950\/50,
body[data-quokka-theme="light"] .bg-slate-950\/40,
body[data-quokka-theme="light"] .bg-white\/5,
body[data-quokka-theme="light"] .bg-white\/10,
body[data-quokka-theme="light"] .glass-card,
body[data-quokka-theme="light"] .card {
  color: var(--q-ink);
  border-color: var(--q-border);
  background-color: var(--q-surface);
  background-image: none;
  box-shadow: 0 12px 30px rgba(23, 35, 52, 0.06);
  backdrop-filter: none;
}

body[data-quokka-theme="light"] .text-white,
body[data-quokka-theme="light"] .text-slate-50,
body[data-quokka-theme="light"] .text-slate-100,
body[data-quokka-theme="light"] .text-slate-200,
body[data-quokka-theme="light"] .text-slate-300,
body[data-quokka-theme="light"] .text-slate-400,
body[data-quokka-theme="light"] .text-slate-500,
body[data-quokka-theme="light"] .text-slate-600,
body[data-quokka-theme="light"] .text-gray-100,
body[data-quokka-theme="light"] .text-gray-200,
body[data-quokka-theme="light"] .text-gray-300,
body[data-quokka-theme="light"] .text-gray-400,
body[data-quokka-theme="light"] .text-gray-500 {
  color: var(--q-ink);
}

body[data-quokka-theme="light"] .text-slate-300,
body[data-quokka-theme="light"] .text-slate-400,
body[data-quokka-theme="light"] .text-slate-500,
body[data-quokka-theme="light"] .text-gray-300,
body[data-quokka-theme="light"] .text-gray-400,
body[data-quokka-theme="light"] .text-gray-500 {
  color: var(--q-muted);
}

body[data-quokka-theme="light"] .text-cyan-300,
body[data-quokka-theme="light"] .text-cyan-400,
body[data-quokka-theme="light"] .text-sky-300,
body[data-quokka-theme="light"] .text-sky-400,
body[data-quokka-theme="light"] .text-indigo-300,
body[data-quokka-theme="light"] .text-indigo-400,
body[data-quokka-theme="light"] .text-violet-300,
body[data-quokka-theme="light"] .text-violet-400,
body[data-quokka-theme="light"] .text-purple-300,
body[data-quokka-theme="light"] .text-purple-400,
body[data-quokka-theme="light"] .text-emerald-300,
body[data-quokka-theme="light"] .text-emerald-400,
body[data-quokka-theme="light"] .text-green-300,
body[data-quokka-theme="light"] .text-green-400,
body[data-quokka-theme="light"] .text-fuchsia-300,
body[data-quokka-theme="light"] .text-fuchsia-400,
body[data-quokka-theme="light"] .text-orange-300,
body[data-quokka-theme="light"] .text-orange-400,
body[data-quokka-theme="light"] .text-rose-300,
body[data-quokka-theme="light"] .text-rose-400,
body[data-quokka-theme="light"] .text-red-300,
body[data-quokka-theme="light"] .text-red-400,
body[data-quokka-theme="light"] .text-amber-300,
body[data-quokka-theme="light"] .text-amber-400,
body[data-quokka-theme="light"] .text-yellow-300,
body[data-quokka-theme="light"] .text-yellow-400 {
  color: var(--q-action);
}

body[data-quokka-theme="light"] .bg-clip-text.text-transparent,
body[data-quokka-theme="light"] .text-gradient {
  color: var(--q-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

body[data-quokka-theme="light"] .border-white\/5,
body[data-quokka-theme="light"] .border-white\/10,
body[data-quokka-theme="light"] .border-slate-600,
body[data-quokka-theme="light"] .border-slate-700 {
  border-color: var(--q-border);
}

body[data-quokka-theme="light"] [class~="hover:text-white"]:hover,
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-cyan-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-indigo-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-violet-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-sky-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-emerald-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-purple-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-orange-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-rose-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-fuchsia-300"],
body[data-quokka-theme="light"] .group:hover [class~="group-hover:text-amber-300"] {
  color: var(--q-action-hover);
}

body[data-quokka-theme="light"] .bg-gradient-to-r.text-white,
body[data-quokka-theme="light"] .bg-gradient-to-r .text-white,
body[data-quokka-theme="light"] .btn-primary,
body[data-quokka-theme="light"] .hub-cta,
body[data-quokka-theme="light"] button.bg-cyan-500,
body[data-quokka-theme="light"] button.bg-indigo-500,
body[data-quokka-theme="light"] button.bg-blue-500,
body[data-quokka-theme="light"] button.bg-violet-500,
body[data-quokka-theme="light"] button.bg-emerald-500,
body[data-quokka-theme="light"] button.bg-purple-500,
body[data-quokka-theme="light"] button.bg-orange-500,
body[data-quokka-theme="light"] button.bg-rose-500,
body[data-quokka-theme="light"] button.bg-green-500 {
  color: #ffffff;
  background-color: var(--q-action);
  background-image: none;
  -webkit-text-fill-color: #ffffff;
}

body[data-quokka-theme="light"] .bg-gradient-to-r.text-white:hover,
body[data-quokka-theme="light"] .bg-gradient-to-r:hover .text-white,
body[data-quokka-theme="light"] .btn-primary:hover,
body[data-quokka-theme="light"] .hub-cta:hover,
body[data-quokka-theme="light"] button.bg-cyan-500:hover,
body[data-quokka-theme="light"] button.bg-indigo-500:hover,
body[data-quokka-theme="light"] button.bg-blue-500:hover,
body[data-quokka-theme="light"] button.bg-violet-500:hover,
body[data-quokka-theme="light"] button.bg-emerald-500:hover,
body[data-quokka-theme="light"] button.bg-purple-500:hover,
body[data-quokka-theme="light"] button.bg-orange-500:hover,
body[data-quokka-theme="light"] button.bg-rose-500:hover,
body[data-quokka-theme="light"] button.bg-green-500:hover {
  color: #ffffff;
  background-color: var(--q-action-hover);
  -webkit-text-fill-color: #ffffff;
}

body[data-quokka-theme="light"] .en-hub .hub-cta:hover {
  color: #ffffff;
  background: var(--q-action-hover);
}

body[data-quokka-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
body[data-quokka-theme="light"] select,
body[data-quokka-theme="light"] textarea,
body[data-quokka-theme="light"] .input-field {
  color: var(--q-ink);
  border-color: var(--q-control-border);
  background-color: var(--q-surface);
}

body[data-quokka-theme="light"] input::placeholder,
body[data-quokka-theme="light"] textarea::placeholder {
  color: var(--q-muted);
  opacity: 1;
}

body[data-quokka-theme="light"] :focus-visible {
  outline: 3px solid var(--q-focus);
  outline-offset: 3px;
}

body[data-quokka-theme="light"] button:disabled,
body[data-quokka-theme="light"] [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
}

body[data-quokka-theme="light"] a {
  text-decoration: none;
}

body[data-quokka-theme="light"] .gt-lead a,
body[data-quokka-theme="light"] .gt-info-section a,
body[data-quokka-theme="light"] .gt-faq a {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

body[data-quokka-theme="light"] .global-tool-page {
  color: var(--q-ink);
  background: var(--q-page);
}

body[data-quokka-theme="light"] .gt-header {
  border-color: var(--q-border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 16px rgba(23, 35, 52, 0.04);
}

body[data-quokka-theme="light"] .gt-brand-mark {
  border-color: #b8d9d4;
  color: var(--q-action);
  background: var(--q-action-soft);
  box-shadow: none;
}

body[data-quokka-theme="light"] .gt-brand-name,
body[data-quokka-theme="light"] .gt-title,
body[data-quokka-theme="light"] .gt-card-title,
body[data-quokka-theme="light"] .gt-side-title,
body[data-quokka-theme="light"] .gt-section-title,
body[data-quokka-theme="light"] .gt-faq summary,
body[data-quokka-theme="light"] .gt-file-name {
  color: var(--q-ink);
}

body[data-quokka-theme="light"] .gt-brand-kicker,
body[data-quokka-theme="light"] .gt-card-subtitle,
body[data-quokka-theme="light"] .gt-lead,
body[data-quokka-theme="light"] .gt-upload-help,
body[data-quokka-theme="light"] .gt-file-detail,
body[data-quokka-theme="light"] .gt-helper,
body[data-quokka-theme="light"] .gt-side-card p,
body[data-quokka-theme="light"] .gt-side-card li,
body[data-quokka-theme="light"] .gt-faq details p,
body[data-quokka-theme="light"] .gt-footer,
body[data-quokka-theme="light"] .gt-footer a {
  color: var(--q-muted);
}

body[data-quokka-theme="light"] .gt-card,
body[data-quokka-theme="light"] .gt-side-card,
body[data-quokka-theme="light"] .gt-stat,
body[data-quokka-theme="light"] .gt-faq details {
  border-color: var(--q-border);
  background: var(--q-surface);
  box-shadow: 0 12px 30px rgba(23, 35, 52, 0.06);
}

body[data-quokka-theme="light"] .gt-pill,
body[data-quokka-theme="light"] .gt-language-link,
body[data-quokka-theme="light"] .gt-file-row,
body[data-quokka-theme="light"] .gt-icon-button,
body[data-quokka-theme="light"] .gt-button-secondary,
body[data-quokka-theme="light"] .gt-field input,
body[data-quokka-theme="light"] .gt-field select,
body[data-quokka-theme="light"] .gt-field textarea,
body[data-quokka-theme="light"] .gt-ocr-result {
  color: var(--q-ink);
  border-color: var(--q-control-border);
  background: var(--q-surface);
}

body[data-quokka-theme="light"] .gt-upload-zone {
  border-color: var(--q-control-border);
  color: var(--q-muted);
  background: var(--q-surface-soft);
}

body[data-quokka-theme="light"] .gt-upload-zone:hover,
body[data-quokka-theme="light"] .gt-upload-zone:focus-within,
body[data-quokka-theme="light"] .gt-upload-zone.is-dragging {
  border-color: var(--q-action);
  background: var(--q-action-soft);
}

body[data-quokka-theme="light"] .gt-upload-icon {
  color: var(--q-action);
  background: var(--q-action-soft);
}

body[data-quokka-theme="light"] .gt-pill-success,
body[data-quokka-theme="light"] .gt-status[data-tone="success"] {
  color: var(--q-success);
  background: var(--q-success-soft);
}

body[data-quokka-theme="light"] .gt-status[data-tone="error"] {
  color: var(--q-danger);
  background: var(--q-danger-soft);
}

body[data-quokka-theme="light"] .gt-status[data-tone="warning"],
body[data-quokka-theme="light"] .gt-side-note .gt-side-title {
  color: var(--q-warning);
  background-color: var(--q-warning-soft);
}

body[data-quokka-theme="light"] .gt-side-note {
  border-color: #e8cb86;
  background: var(--q-warning-soft);
}

body[data-quokka-theme="light"] .gt-button-primary {
  border-color: var(--q-action);
  color: #ffffff;
  background: var(--q-action);
}

body[data-quokka-theme="light"] .gt-button-primary:hover:not(:disabled),
body[data-quokka-theme="light"] .gt-button-primary:focus-visible:not(:disabled) {
  color: #ffffff;
  background: var(--q-action-hover);
}

body[data-quokka-theme="light"] .gt-icon-button:hover,
body[data-quokka-theme="light"] .gt-icon-button:focus-visible {
  border-color: var(--q-action);
  color: var(--q-action-hover);
  background: var(--q-action-soft);
}

body[data-quokka-theme="light"] .gt-icon-button-danger:hover,
body[data-quokka-theme="light"] .gt-icon-button-danger:focus-visible {
  border-color: var(--q-danger);
  color: var(--q-danger);
  background: var(--q-danger-soft);
}

body[data-quokka-theme="light"] .gt-ocr-preview,
body[data-quokka-theme="light"] .gt-file-preview {
  color: var(--q-ink);
  border-color: var(--q-border);
  background: var(--q-surface-soft);
}

body[data-quokka-theme="light"] .gt-footer {
  border-color: var(--q-border);
}

body[data-quokka-theme="light"] button[aria-pressed="false"] {
  border-color: var(--q-border);
  color: var(--q-muted);
  background: var(--q-surface-soft);
}

body[data-quokka-theme="light"] button[aria-pressed="false"]:hover,
body[data-quokka-theme="light"] button[aria-pressed="false"]:focus-visible {
  border-color: var(--q-action);
  color: var(--q-action-hover);
  background: var(--q-action-soft);
}

body[data-quokka-theme="light"] button[aria-pressed="true"] {
  border-color: var(--q-action);
  color: #ffffff;
  background: var(--q-action);
}

body[data-quokka-theme="light"] button[aria-pressed="true"]:hover,
body[data-quokka-theme="light"] button[aria-pressed="true"]:focus-visible {
  color: #ffffff;
  background: var(--q-action-hover);
}

body[data-quokka-theme="light"] button[aria-pressed="true"] *,
body[data-quokka-theme="light"] button[role="radio"][aria-checked="true"] * {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

body[data-quokka-theme="light"] button[role="radio"][aria-checked="false"] {
  border-color: var(--q-border);
  color: var(--q-muted);
  background: var(--q-surface-soft);
}

body[data-quokka-theme="light"] button[role="radio"][aria-checked="false"]:hover,
body[data-quokka-theme="light"] button[role="radio"][aria-checked="false"]:focus-visible {
  border-color: var(--q-action);
  color: var(--q-action-hover);
  background: var(--q-action-soft);
}

body[data-quokka-theme="light"] button[role="radio"][aria-checked="true"] {
  border-color: var(--q-action);
  color: #ffffff;
  background: var(--q-action);
}

body[data-quokka-theme="light"] button[role="radio"][aria-checked="true"]:hover,
body[data-quokka-theme="light"] button[role="radio"][aria-checked="true"]:focus-visible {
  color: #ffffff;
  background: var(--q-action-hover);
}

body[data-quokka-theme="light"] .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body[data-quokka-theme="light"] .theme-glow {
  right: 0 !important;
}

body[data-quokka-theme="light"] .theme-scroll-hint {
  left: 50% !important;
  width: max-content;
  transform: translateX(-50%) !important;
}

body[data-quokka-theme="light"] .text-primary {
  color: var(--q-action);
}

body[data-quokka-theme="light"] :is(a, button, [role="button"])[class~="bg-primary"] {
  border-color: var(--q-action);
  color: #ffffff;
  background: var(--q-action);
  background-image: none;
}

body[data-quokka-theme="light"] :is(a, button, [role="button"])[class~="bg-primary"] *,
body[data-quokka-theme="light"] :is(a, button, [role="button"])[class~="bg-primary"].text-white {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

body[data-quokka-theme="light"] [class~="hover:bg-red-600"]:hover {
  border-color: var(--q-action-hover);
  color: #ffffff;
  background: var(--q-action-hover);
}

body[data-quokka-theme="light"] .quokka-footer {
  border-color: var(--q-border);
  background: var(--q-surface);
  color: var(--q-ink);
}

body[data-quokka-theme="light"] .quokka-footer__brand > a,
body[data-quokka-theme="light"] .quokka-footer__group h2 {
  color: var(--q-ink);
}

body[data-quokka-theme="light"] .quokka-footer__brand p,
body[data-quokka-theme="light"] .quokka-footer__meta p,
body[data-quokka-theme="light"] .quokka-footer__group a,
body[data-quokka-theme="light"] .quokka-footer__meta a,
body[data-quokka-theme="light"] .quokka-ad {
  color: var(--q-muted);
}

body[data-quokka-theme="light"] .quokka-footer__group a:hover,
body[data-quokka-theme="light"] .quokka-footer__group a:focus-visible,
body[data-quokka-theme="light"] .quokka-footer__meta a:hover,
body[data-quokka-theme="light"] .quokka-footer__meta a:focus-visible {
  color: var(--q-action-hover);
}

@media (prefers-reduced-motion: reduce) {
  body[data-quokka-theme="light"] *,
  body[data-quokka-theme="light"] *::before,
  body[data-quokka-theme="light"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 360px) {
  body[data-quokka-theme="light"] .theme-scroll-hint {
    display: none;
  }
}