:root {
  --c-bg: #080c14;
  --c-surface: #0f1623;
  --c-elevated: #161f30;
  --c-border: #1e2a3f;
  --c-ink: #e2e8f0;
  --c-ink-mute: #94a3b8;
  --c-ink-dim: #64748b;
  --c-violet: #6366f1;
  --c-cyan: #22d3ee;
  --c-amber: #f59e0b;
  --c-violet-dim: rgba(99, 102, 241, 0.15);
  --c-cyan-dim: rgba(34, 211, 238, 0.12);
  --c-amber-dim: rgba(245, 158, 11, 0.12);
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--c-bg);
  color: var(--c-ink);
}

h1, h2, h3, h4, h5, h6, p, li, span, a {
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--c-ink);
}

.font-display {
  font-family: 'Syne', sans-serif;
}

.text-ink { color: var(--c-ink); }
.text-ink-mute { color: var(--c-ink-mute); }
.text-ink-dim { color: var(--c-ink-dim); }
.text-white { color: #ffffff; }
.text-violet-brand { color: var(--c-violet); }
.text-cyan-brand { color: var(--c-cyan); }
.text-amber-brand { color: var(--c-amber); }

.bg-bg { background-color: var(--c-bg); }
.bg-surface { background-color: var(--c-surface); }
.bg-elevated { background-color: var(--c-elevated); }
.bg-violet-brand { background-color: var(--c-violet); }
.bg-cyan-brand { background-color: var(--c-cyan); }
.bg-amber-brand { background-color: var(--c-amber); }
.bg-violet-dim { background-color: var(--c-violet-dim); }
.bg-cyan-dim { background-color: var(--c-cyan-dim); }
.bg-amber-dim { background-color: var(--c-amber-dim); }
.bg-border { background-color: var(--c-border); }

.border-border { border-color: var(--c-border); }
.border-violet-brand { border-color: var(--c-violet); }
.border-cyan-brand { border-color: var(--c-cyan); }
.border-amber-brand { border-color: var(--c-amber); }

.from-violet-brand { --tw-gradient-from: var(--c-violet) var(--tw-gradient-from-position); --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-brand { --tw-gradient-to: var(--c-cyan) var(--tw-gradient-to-position); }
.from-violet-dim { --tw-gradient-from: var(--c-violet-dim) var(--tw-gradient-from-position); --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-cyan-dim { --tw-gradient-from: var(--c-cyan-dim) var(--tw-gradient-from-position); --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-amber-dim { --tw-gradient-from: var(--c-amber-dim) var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-elevated { --tw-gradient-to: rgb(22 31 48 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--c-elevated), var(--tw-gradient-to); }
.to-bg { --tw-gradient-to: var(--c-bg) var(--tw-gradient-to-position); }

.hover\:text-cyan-brand:hover { color: var(--c-cyan); }
.hover\:text-ink:hover { color: var(--c-ink); }

a.text-cyan-brand,
a.hover\:text-cyan-brand:hover {
  color: var(--c-cyan);
}