:root {
  color-scheme: light;
  --accent-50: #fff0e5;
  --accent-100: #ffe2cc;
  --accent-500: #f96915;
  --accent-600: #d6500a;
  --accent-700: #a33c06;
  --canvas: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --surface-3: #eaeae7;
  --rule: #e5e5e1;
  --rule-strong: #d4d4cf;
  --ink: #161513;
  --ink-2: #52524d;
  --ink-3: #8a8a82;
  --ink-4: #b4b4ac;
  --side-bg: #0f1115;
  --side-surface: #181b22;
  --side-border: #23272f;
  --side-text: #e6e8ec;
  --side-text-2: #9ca3ae;
  --side-text-3: #5c6371;
  --success-fg: #1e7044;
  --success-bg: #dfefe5;
  --danger-fg: #c84b3f;
  --danger-bg: #fbebe9;
  --warning-fg: #a26b0e;
  --warning-bg: #fbefcf;
  --info-fg: #2b6cb0;
  --info-bg: #dce9f5;
  --violet-fg: #6b4dba;
  --violet-bg: #e8e0f5;
  --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.05);
  --shadow-md: 0 12px 28px rgba(15, 17, 21, 0.08);
  --shadow-lg: 0 24px 64px rgba(15, 17, 21, 0.12);
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #08090a;
  --surface: #0f1115;
  --surface-2: #181b22;
  --surface-3: #22262e;
  --rule: #23272f;
  --rule-strong: #2e333d;
  --ink: #e6e8ec;
  --ink-2: #9ca3ae;
  --ink-3: #6b7280;
  --ink-4: #4a5160;
  --success-fg: #5fca8e;
  --success-bg: rgba(95, 202, 142, 0.11);
  --danger-fg: #f26057;
  --danger-bg: rgba(242, 96, 87, 0.11);
  --warning-fg: #e2b141;
  --warning-bg: rgba(226, 177, 65, 0.11);
  --info-fg: #7da0f8;
  --info-bg: rgba(125, 160, 248, 0.11);
  --violet-fg: #b594f0;
  --violet-bg: rgba(181, 148, 240, 0.11);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 16px 34px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.45);
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-variable.woff2") format("woff2");
}