@import "tailwindcss";


@theme {
  --color-bg-main: var(--bg-main);
  --color-bg-sidebar: var(--bg-sidebar);
  --color-bg-card: var(--bg-card);
  --color-bg-input: var(--bg-input);
  --color-bg-hover: var(--bg-hover);
  --color-border-main: var(--border-main);
  --color-text-main: var(--text-main);
  --color-text-sec: var(--text-sec);
}

:root {
  --primary-color: #007AFF;
  --bg-main: #FBFBFD;
  --bg-sidebar: #F8FAFD;
  --bg-card: #FFFFFF;
  --bg-input: #F2F2F7;
  --bg-hover: #E5E5E7;
  --border-main: #E5E5E7;
  --text-main: #1D1D1F;
  --text-sec: #86868B;
}

html.dark {
  --bg-main: #000000;
  --bg-sidebar: #1C1C1E;
  --bg-card: #1C1C1E;
  --bg-input: #2C2C2E;
  --bg-hover: #3A3A3C;
  --border-main: #38383A;
  --text-main: #F5F5F7;
  --text-sec: #98989D;
}


body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: var(--bg-light);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

/* Base custom styles for utility-like usage */
.bg-light { background-color: var(--bg-light); }
.bg-sidebar { background-color: var(--sidebar-bg); }
.text-main { color: var(--text-main); }
.text-sec { color: var(--text-sec); }
.border-main { border-color: var(--border-color); }