:root {
  color-scheme: light;

  --canvas: #fbfbfa;
  --surface: #ffffff;
  --surface-subtle: #f7f6f3;
  --surface-code: #161618;

  --border: #eaeaea;
  --border-dark: #d6d6d6;
  --border-strong: #d6d6d6;
  --border-code: #2c2c30;

  --text-main: #111111;
  --text-muted: #787774;
  --text-soft: #9b9a97;

  --accent: #111111;
  --accent-contrast: #ffffff;

  --pastel-blue-bg: #e1f3fe;
  --pastel-blue-text: #1f6c9f;

  --pastel-green-bg: #edf3ec;
  --pastel-green-text: #346538;

  --pastel-yellow-bg: #fbf3db;
  --pastel-yellow-text: #956400;

  --pastel-red-bg: #fdebec;
  --pastel-red-text: #9f2f2d;

  --python-soft: var(--pastel-green-bg);
  --python-text: var(--pastel-green-text);

  --nav-bg: rgba(251, 251, 250, 0.88);

  --terminal-bg: #0d0d0f;
  --terminal-header: #18181b;
  --terminal-footer: #151518;
  --terminal-text: #d1d1d6;
  --terminal-muted: #9999a0;
  --terminal-soft: #8b8b92;
  --terminal-success: #98c379;
  --terminal-input: #61afef;
  --terminal-caret: #ffffff;

  --success-text: #2f7d32;
  --error-text: #b42318;

  --font-arabic:
    "Thmanyah Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-mono:
    "SF Mono",
    "Geist Mono",
    "JetBrains Mono",
    Menlo,
    Consolas,
    monospace;

  --spring: cubic-bezier(0.16, 1, 0.3, 1);
}

:root.cb-dark {
  color-scheme: dark;

  --canvas: #121212;
  --surface: #1a1a1a;
  --surface-subtle: #222222;
  --surface-code: #121214;

  --border: #2c2c2c;
  --border-dark: #3a3a3a;
  --border-strong: #3a3a3a;
  --border-code: #252528;

  --text-main: #ededed;
  --text-muted: #999999;
  --text-soft: #666666;

  --accent: #ededed;
  --accent-contrast: #121212;

  --pastel-blue-bg: rgba(31, 108, 159, 0.22);
  --pastel-blue-text: #70b8e8;

  --pastel-green-bg: rgba(52, 101, 56, 0.22);
  --pastel-green-text: #8cd494;

  --pastel-yellow-bg: rgba(149, 100, 0, 0.22);
  --pastel-yellow-text: #ffd580;

  --pastel-red-bg: rgba(159, 47, 45, 0.22);
  --pastel-red-text: #fca5a5;

  --python-soft: var(--pastel-green-bg);
  --python-text: var(--pastel-green-text);

  --nav-bg: rgba(18, 18, 18, 0.88);

  --success-text: #8cd494;
  --error-text: #fca5a5;
}

.cb-theme {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 6px;

  background: var(--surface);
  color: var(--text-main);

  cursor: pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}

.cb-theme:hover {
  background: var(--surface-subtle);
  border-color: var(--border-dark);
}

.cb-theme svg {
  display: block;
  width: 16px;
  height: 16px;
}

.cb-theme .icon-moon {
  display: none;
}

:root.cb-dark .cb-theme .icon-sun {
  display: none;
}

:root.cb-dark .cb-theme .icon-moon {
  display: block;
}

@media (max-width: 640px) {
  .cb-theme {
    width: 38px;
    height: 38px;
  }
}