/* 00-base */
:root {
  --bg: #070d14;
  --bg-soft: #0d1722;
  --bg-elevated: #142235;
  --bg-panel: #17283d;
  --bg-panel-2: #1f3149;
  --surface: rgba(18, 31, 48, 0.88);
  --surface-2: rgba(9, 17, 27, 0.92);

  --border: rgba(143, 169, 196, 0.16);
  --border-strong: rgba(143, 169, 196, 0.24);

  --text: #edf2f8;
  --text-soft: #b8c4d3;
  --text-muted: #7f92a7;

  --primary: #6fa8ff;
  --primary-2: #7ce0d3;
  --primary-deep: #243752;
  --primary-glow: rgba(111, 168, 255, 0.22);
  --accent-hot: #ffb86c;

  --success: #57d28c;
  --warning: #f0c46d;
  --danger: #ff7373;

  --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 10px 22px rgba(0, 0, 0, 0.18);

  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 224, 211, 0.12), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(111, 168, 255, 0.14), transparent 28%),
    radial-gradient(circle at 70% 78%, rgba(255, 184, 108, 0.07), transparent 30%),
    linear-gradient(180deg, #070d14 0%, #0a111b 46%, #071018 100%);
  color: var(--text);
  min-height: 100vh;
  letter-spacing: 0.01em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.76), transparent 72%);
}