/*
 * 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;

  --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 {
  list-style-position: inside;
}