/*
 * This is the main application stylesheet.
 * It imports all the modular CSS files organized by category.
 *
 *= require_tree ./base
 *= require_tree ./components
 *= require_tree ./layout
 *= require_self
 */

:root {
  --bg-primary: #16161e;
  --bg-secondary: #1a1b26;
  --bg-tertiary: #24283b;
  --bg-float: #1f2335;
  --bg-success: #9ece6a1a;
  --bg-warning: #ff9e641a;
  --bg-danger: #f7768e1a;

  --fg-primary: #c0caf5;
  --fg-secondary: #a9b1d6;
  --fg-muted: #565f89;

  --blue: #7aa2f7;
  --cyan: #7dcfff;
  --purple: #bb9af7;
  --success: #9ece6a;
  --warning: #ff9e64;
  --danger: #f7768e;
  --yellow: #e0af68;

  --border: #292e42;
  --selection: #364A82;

  --btn-text: #16161e;

  --spacing-unit: 0.25rem;

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
}

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

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--fg-primary);
  background-color: var(--bg-primary);
}

::selection {
  background-color: var(--selection);
  color: var(--fg-primary);
}

a {
  color: var(--blue);
  transition: color 0.2s;
}

a:hover {
  color: var(--cyan);
  text-decoration: underline;
}

ol, ul {
  list-style-position: inside;
}

[data-theme="light"] {
  --bg-primary: #c4c8da;
  --bg-secondary: #d0d5e3;
  --bg-tertiary: #e1e2e7;
  --bg-float: #e1e2e7;
  --bg-success: #5875391a;
  --bg-warning: #b15c001a;
  --bg-danger: #f52a651a;
  --fg-primary: #3760bf;
  --fg-secondary: #6172b0;
  --fg-muted: #848cb5;
  --blue: #2e7de9;
  --cyan: #007197;
  --purple: #7847bd;
  --success: #587539;
  --warning: #b15c00;
  --danger: #f52a65;
  --yellow: #8c6c3e;
  --border: #b4b5b9;
  --selection: #b7c1e3;
  --btn-text: #ffffff;
}