:root {
  --anth-950: #14181a;
  --anth-900: #1d2427;
  --anth-850: #293133;
  --anth-800: #323b3f;
  --anth-750: #3a4449;

  --bg-base: #070707;
  --bg-warm: var(--anth-950);
  --bg-cool: var(--anth-900);

  --ink-main: #f5f5f5;
  --ink-soft: #bbbbbb;

  --accent: #ffdf34;
  --accent-2: #ffd84a;
  --accent-3: #9f9f9f;

  --surface: color-mix(in srgb, var(--anth-850) 72%, transparent);
  --surface-strong: color-mix(in srgb, var(--anth-900) 90%, #000000 10%);
  --surface-border: rgba(255, 255, 255, 0.14);
  --surface-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
  --surface-shadow-soft: 0 8px 16px rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: "Bricolage Grotesque", sans-serif;
  color: var(--ink-main);
  background: var(--anth-950);
  overflow-x: hidden;
}

body::before,
body::after {
  content: none;
}

.grain {
  display: none;
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: "DM Serif Display", serif;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.glass {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.glass-soft {
  background: var(--surface-strong);
  border: 1px solid var(--surface-border);
  box-shadow: var(--surface-shadow-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}