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

:root {
  --bg: #141d2b;
  --bg2: #1a2535;
  --surface: #1f2e40;
  --border: rgba(91,179,208,0.18);
  --border2: rgba(91,179,208,0.35);
  --text: #e8eaf0;
  --text-dark: #141d2b;
  --muted: rgba(232,234,240,0.38);
  --accent: #5bb3d0;
  --accent2: #78c8e0;
  --green: #4cbe7a;
  --red: #e85555;
  --polaroid-bg: #e8eaf0;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  font-family: 'Figtree', sans-serif;
  overflow: hidden;
}

body.has-grain::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 10;
  opacity: var(--grain-opacity, 0.35);
}