@import url('/fonts/onest/400.css');
@import url('/fonts/onest/500.css');
@import url('/fonts/onest/600.css');
@import url('/fonts/onest/700.css');
@import url('/fonts/anton/400.css');
@import url('/fonts/bebas-neue/400.css');
@import url('/fonts/caveat/600.css');
@import url('/fonts/playfair-display/600.css');

:root {
  --bg: #0f0f14;
  --bg-deep: #08090d;
  --surface-1: #ffffff05;
  --surface-2: #ffffff0a;
  --surface-3: #ffffff0f;
  --surface-4: #ffffff14;
  --surface-raised: #16161d;
  --surface-overlay: #1c1c24;
  --line-1: #ffffff14;
  --line-2: #ffffff1f;
  --line-3: #ffffff33;
  --text-1: #fff;
  --text-2: #ffffffb8;
  --text-3: #ffffff8c;
  --text-4: #ffffff66;
  --accent: #00ccbe;
  --accent-hover: #00b3a8;
  --accent-soft: #00ccbe1f;
  --accent-border: #00ccbe59;
  --on-accent: #04211f;
  --danger: #f87171;
  --danger-soft: #f871711f;
  --danger-border: #f8717159;
  --warning: #fbbf24;
  --warning-soft: #fbbf241f;
  --warning-border: #fbbf2452;
  --success: #4ade80;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #00ccbeb3;
  --r-control: 8px;
  --r-lg: 10px;
  --r-card: 12px;
  --r-panel: 16px;
  --font-body: Onest, Inter, "Segoe UI", sans-serif;
  --font-display: Anton, Onest, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text-1);
  font: 400 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.i { flex: none; display: block; }
[hidden] { display: none !important; }