/* Ecomflow design tokens. Generated by Onbrand from the codebase; do not edit by hand. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
@font-face{font-family:"OpenRunde";src:url(fonts/OpenRunde-500.woff2);font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"OpenRunde";src:url(fonts/OpenRunde-600.woff2);font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"OpenRunde";src:url(fonts/OpenRunde-400.woff2);font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg:#fff;
  --bg-subtle:#fafafa;
  --bg-2:#f5f5f5;
  --bg-3:#f0f0f0;
  --bg-4:#e8e8e8;
  --fg-4:#181925;
  --fg-3:#666;
  --fg-2:#999;
  --fg-1:#b3b3b3;
  --bg-a1:#00000008;
  --bg-a2:#0000000d;
  --bg-a3:#00000014;
  --bg-a4:#0000001f;
  --primary:#0e6b32;
  --primary-fg:#fff;
  --green-1:#effbf2;
  --green-2:#c2efcd;
  --green-4:#33c758;
  --red-1:#fff3f0;
  --red-2:#ffe2db;
  --red-4:#ff2f00;
  --amber-1:#fff8eb;
  --amber-2:#ffeac2;
  --amber-4:#ffa600;
  --sky-1:#ebf2ff;
  --sky-2:#bed5fe;
  --sky-4:#2c78fc;
  --purple-1:#f1f1fe;
  --purple-2:#dad9fc;
  --purple-4:#918df6;
  --island:#141416;
  --island-fg:#fff;
  --island-2:#2e2e33;
  --island-fg-2:#9a9aa0;
  --shadow-1:0 1px 1px #00000014,0 0 0 1px #0000000d;
  --shadow-2:0 1px 3px #00000014,0 0 0 1px #00000005;
  --shadow-3:0 1px 3px #0000000f,0 8px 16px #0000000f,0 0 0 1px #00000005;
  --shadow-4:0 3px 12px #0000000f,0 4px 16px #0000000f,0 0 0 1px #00000008;
  --font:"OpenRunde","Open Runde","Inter","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif;
  --mono:"SF Mono",Menlo,"OpenRunde",monospace;
  --r-card:16px;
  --r-input:12px;
  --r-row:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not(.light){
  --bg:#0f0f10;
  --bg-subtle:#131314;
  --bg-2:#1a1a1c;
  --bg-3:#232326;
  --bg-4:#2d2d31;
  --fg-4:#ededee;
  --fg-3:#b8b8bd;
  --fg-2:#8c8c93;
  --fg-1:#66666d;
  --bg-a1:#ffffff0f;
  --bg-a2:#ffffff14;
  --bg-a3:#ffffff1f;
  --bg-a4:#ffffff2e;
  --primary:#33c758;
  --primary-fg:#0a2912;
  --green-1:#0d2a16;
  --green-2:#164a24;
  --red-1:#331008;
  --red-2:#4d1a0e;
  --amber-1:#33230a;
  --amber-2:#4d360f;
  --sky-1:#0d1a33;
  --sky-2:#12264d;
  --purple-1:#171433;
  --purple-2:#231f4d;
  --purple-4:#9580ff;
  --island:#ededee;
  --island-fg:#111113;
  --island-2:#d6d6da;
  --island-fg-2:#6e6e75;
  --shadow-1:0 1px 1px #00000014,inset 0 0 0 1px #ffffff1a;
  --shadow-2:0 1px 3px #00000033,inset 0 0 0 1px #ffffff14;
  --shadow-3:0 8px 16px #0000004d,inset 0 0 0 1px #ffffff14;
  --shadow-4:0 4px 16px #00000066,inset 0 0 0 1px #ffffff1a;
  color-scheme:dark}}
:root[data-theme="dark"],:root.dark{
  --bg:#0f0f10;
  --bg-subtle:#131314;
  --bg-2:#1a1a1c;
  --bg-3:#232326;
  --bg-4:#2d2d31;
  --fg-4:#ededee;
  --fg-3:#b8b8bd;
  --fg-2:#8c8c93;
  --fg-1:#66666d;
  --bg-a1:#ffffff0f;
  --bg-a2:#ffffff14;
  --bg-a3:#ffffff1f;
  --bg-a4:#ffffff2e;
  --primary:#33c758;
  --primary-fg:#0a2912;
  --green-1:#0d2a16;
  --green-2:#164a24;
  --red-1:#331008;
  --red-2:#4d1a0e;
  --amber-1:#33230a;
  --amber-2:#4d360f;
  --sky-1:#0d1a33;
  --sky-2:#12264d;
  --purple-1:#171433;
  --purple-2:#231f4d;
  --purple-4:#9580ff;
  --island:#ededee;
  --island-fg:#111113;
  --island-2:#d6d6da;
  --island-fg-2:#6e6e75;
  --shadow-1:0 1px 1px #00000014,inset 0 0 0 1px #ffffff1a;
  --shadow-2:0 1px 3px #00000033,inset 0 0 0 1px #ffffff14;
  --shadow-3:0 8px 16px #0000004d,inset 0 0 0 1px #ffffff14;
  --shadow-4:0 4px 16px #00000066,inset 0 0 0 1px #ffffff1a;
  color-scheme:dark}