:root,
[data-theme="light"] {
  color-scheme: light;
  --space1: 8px;
  --space2: 16px;
  --space3: 24px;
  --space4: 32px;
  --space5: 40px;
  --space6: 48px;
  --cardPad: 20px;
  --cardGap: 16px;
  --radius: 12px;
  --radiusSm: 10px;
  --controlHeight: 44px;
  --motionDuration: 150ms;
  --controlLift: -1px;
  --fontSans: "Inter", system-ui, sans-serif;
  --fontMono: "JetBrains Mono", ui-monospace, monospace;
  --letterWordmark: 0.08em;
  --accent: #0F766E;
  --accentHover: #115e59;
  --accentText: #ffffff;
  --accentLink: #0F766E;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #7b8ca3;
  --shadow: 0 8px 24px color-mix(in srgb, #0f172a 8%, transparent);
  --danger: #b91c1c;
  --dangerBg: #fef2f2;
  --dangerText: #7f1d1d;
  --dangerFill: #b91c1c;
  --dangerOnFill: #ffffff;
  --success: #047857;
  --successBg: #ecfdf5;
  --successText: #064e3b;
  --warning: #b45309;
  --warningBg: #fffbeb;
  --warningText: #78350f;
  --diffRemoveBg: #fee2e2;
  --diffRemoveText: #7f1d1d;
  --diffAddBg: #d1fae5;
  --diffAddText: #064e3b;
  --diffSameBg: #f8fafc;
}

[data-theme="dark"] {
  color-scheme: dark;
  --accent: #0F766E;
  --accentHover: #115e59;
  --accentText: #ffffff;
  --accentLink: #5eead4;
  --bg: #0b1220;
  --surface: #111827;
  --text: #e2e8f0;
  --muted: #cbd5e1;
  --border: #64748b;
  --shadow: 0 8px 24px color-mix(in srgb, #020617 45%, transparent);
  --danger: #fecaca;
  --dangerBg: #7f1d1d;
  --dangerText: #fecaca;
  --dangerFill: #991b1b;
  --dangerOnFill: #fecaca;
  --success: #a7f3d0;
  --successBg: #064e3b;
  --successText: #a7f3d0;
  --warning: #fde68a;
  --warningBg: #78350f;
  --warningText: #fde68a;
  --diffRemoveBg: #7f1d1d;
  --diffRemoveText: #fecaca;
  --diffAddBg: #064e3b;
  --diffAddText: #a7f3d0;
  --diffSameBg: #0b1220;
}

html,
body,
#root {
  margin: 0;
  min-height: 100%;
}

html[data-cookie-consent="set"] .cookieBanner {
  display: none;
}

body {
  font-family: var(--fontSans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

code,
pre,
kbd,
samp {
  font-family: var(--fontMono);
}

a {
  color: var(--accentLink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input:not([type="hidden"]),
select,
textarea {
  min-height: var(--controlHeight);
  box-sizing: border-box;
}

button {
  min-width: var(--controlHeight);
}

:focus-visible {
  outline: 2px solid var(--accentLink);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

@media (min-width: 768px) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --cardPad: 24px;
    --cardGap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --motionDuration: 0.01ms;
    --controlLift: 0px;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}