:root {
  --tool-ink: #111214;
  --tool-paper: #f6f3ea;
  --tool-surface: #ffffff;
  --tool-surface-soft: #f1eee5;
  --tool-text: #111214;
  --tool-muted: #5f636b;
  --tool-line: rgba(17, 18, 20, 0.17);
  --tool-yellow: #ffd60a;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --tool-paper: #101113;
  --tool-surface: #191b1f;
  --tool-surface-soft: #22252a;
  --tool-text: #f5f2e9;
  --tool-muted: #b7bbc4;
  --tool-line: rgba(255, 255, 255, 0.18);
}

body {
  font-size: 15px;
  line-height: 1.78;
  transition: background-color 240ms ease, color 240ms ease;
}

.tool-theme-toggle {
  position: fixed;
  z-index: 10000;
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tool-line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tool-surface) 92%, transparent);
  color: var(--tool-text);
  box-shadow: 0 8px 24px rgba(17, 18, 20, 0.14);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.tool-theme-toggle:hover {
  border-color: var(--tool-yellow);
  background: var(--tool-yellow);
  color: var(--tool-ink);
  transform: translateY(-2px);
}

.tool-theme-toggle.is-embedded {
  display: none;
}

.tool-theme-icon {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 180ms ease, transform 220ms ease;
}

.tool-theme-sun {
  opacity: 0;
  transform: scale(0.65) rotate(-25deg);
}

.tool-theme-moon {
  opacity: 1;
}

html[data-theme="dark"] .tool-theme-sun {
  opacity: 1;
  transform: scale(1) rotate(0);
}

html[data-theme="dark"] .tool-theme-moon {
  opacity: 0;
  transform: scale(0.65) rotate(25deg);
}

html[data-theme="dark"] body {
  color: var(--tool-text);
  background-color: var(--tool-paper) !important;
  background-image: radial-gradient(rgba(255, 214, 10, 0.08) 1px, transparent 1px) !important;
}

html[data-theme="dark"] :where(.glass, .bg-white, .bg-white\/95) {
  background-color: color-mix(in srgb, var(--tool-surface) 94%, transparent) !important;
  border-color: var(--tool-line) !important;
}

html[data-theme="dark"] :where(.bg-gray-50, .bg-gray-50\/60, .bg-gray-100, .bg-slate-50, .bg-slate-50\/70, .bg-slate-100) {
  background-color: var(--tool-surface-soft) !important;
}

html[data-theme="dark"] :where(.bg-gray-200) {
  background-color: #30343a !important;
}

html[data-theme="dark"] :where(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700) {
  color: var(--tool-text) !important;
}

html[data-theme="dark"] :where(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400) {
  color: var(--tool-muted) !important;
}

html[data-theme="dark"] :where(.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-200, .border-slate-300) {
  border-color: var(--tool-line) !important;
}

html[data-theme="dark"] :where(input, textarea, select) {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: #202328 !important;
  color: var(--tool-text) !important;
  caret-color: var(--tool-yellow);
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: #969ba5 !important;
  opacity: 1;
}

html[data-theme="dark"] .innovation-brand-hero > div:first-child > div {
  background: var(--tool-surface) !important;
}

html[data-theme="dark"] :where(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) {
  --tw-shadow-color: rgba(0, 0, 0, 0.42) !important;
}

html[lang="ar"] :where(h1, h2, h3, p, li, label, legend) {
  text-wrap: pretty;
}

html[lang="ar"] :where(h1, h2, h3) {
  letter-spacing: 0 !important;
  line-height: 1.45;
}

@media (max-width: 640px) {
  body {
    font-size: 14px;
    line-height: 1.82;
  }

  html[lang="ar"] .text-5xl {
    font-size: 2.2rem !important;
    line-height: 1.45 !important;
  }

  html[lang="ar"] .text-4xl {
    font-size: 1.9rem !important;
    line-height: 1.48 !important;
  }

  html[lang="ar"] .text-3xl {
    font-size: 1.55rem !important;
    line-height: 1.5 !important;
  }

  html[lang="ar"] .text-2xl {
    font-size: 1.28rem !important;
    line-height: 1.55 !important;
  }

  .tool-theme-toggle {
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
  }
}

@media print {
  html {
    color-scheme: light !important;
  }

  .tool-theme-toggle {
    display: none !important;
  }
}