:root {
  --paper: #f4efe6;
  --ink: #11202d;
  --ink-soft: #415869;
  --line: rgba(17, 32, 45, 0.16);
  --card: rgba(255, 255, 255, 0.72);
  --orange: #ff5f2e;
  --blue: #1772d0;
  --shadow-lg: 0 18px 56px rgba(17, 32, 45, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: 'Bricolage Grotesque', sans-serif;
  background:
    radial-gradient(circle at 85% 15%, rgba(23, 114, 208, 0.22), transparent 35%),
    radial-gradient(circle at 12% 30%, rgba(255, 95, 46, 0.24), transparent 34%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 38px,
      rgba(17, 32, 45, 0.03) 38px,
      rgba(17, 32, 45, 0.03) 39px
    ),
    var(--paper);
}

.surface-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.3));
  box-shadow: var(--shadow-lg);
}