*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  --text-highlight: #EB5E31;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:root {
  --font-primary: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 56px;
  --space-xl: 80px;

  --bg: #f7f4ed;
  --text: #1c1c1c;
  --text-muted: #5f5f5d;
  --border: #eceae4;
  --border-interactive: rgba(28, 28, 28, 0.4);
  --shadow-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1c;
    --text: #f7f4ed;
    --text-muted: rgba(247, 244, 237, 0.7);
    --border: rgba(247, 244, 237, 0.15);
    --border-interactive: rgba(247, 244, 237, 0.4);
    --shadow-focus: rgba(247, 244, 237, 0.1) 0px 4px 12px;
  }
}

[data-theme="light"] {
  --bg: #f7f4ed;
  --text: #1c1c1c;
  --text-muted: #5f5f5d;
  --border: #eceae4;
  --border-interactive: rgba(28, 28, 28, 0.4);
  --shadow-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

[data-theme="dark"] {
  --bg: #1c1c1c;
  --text: #f7f4ed;
  --text-muted: rgba(247, 244, 237, 0.7);
  --border: rgba(247, 244, 237, 0.15);
  --border-interactive: rgba(247, 244, 237, 0.4);
  --shadow-focus: rgba(247, 244, 237, 0.1) 0px 4px 12px;
}

::search-text, ::selection {
  background-color: #EB5E31;
  color: white;
}

::-moz-selection, ::-moz-search-text {
  background-color: #EB5E31;
  color: white;
}

[class*="opacity-"]::selection {
  background-color: highlight;
  color: highlighttext;
}

[class*="opacity-"]::-moz-selection {
  background-color: -moz-html-highlighttext;
  color: -moz-html-highlight;
}