/* ============================= */
/* MANEIT MUSIC — CORE */
/* ============================= */

/* -------- Reset -------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
}

/* -------- Root variables -------- */
:root {
  /* Colors */
  --color-bg: #0b0d10;
  --color-panel: #0f131a;
  --color-panel-soft: #0c1016;

  --color-text: #e8edf7;
  --color-muted: #9aa3b2;
  --color-line: rgba(255, 255, 255, 0.08);

  --color-accent: #9fb7ff; /* icy blue */
  --color-accent-soft: rgba(159, 183, 255, 0.15);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", monospace;

  /* Spacing */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 18px;
  --space-lg: 28px;
  --space-xl: 42px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;

  /* Effects */
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-hard: 0 20px 60px rgba(0,0,0,0.6);
}

/* -------- Base body -------- */
body {
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(159,183,255,0.12), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(159,183,255,0.08), transparent 55%),
    var(--color-bg);

  color: var(--color-text);
  font-family: var(--font-sans);
  letter-spacing: 0.2px;
  line-height: 1.5;
}

/* -------- Text defaults -------- */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0;
  color: var(--color-muted);
}

a {
  color: inherit;
  text-decoration: none;
}

/* -------- Buttons & links -------- */
button {
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--color-line);
  background: rgba(255,255,255,0.03);
  color: var(--color-text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}

button:hover {
  border-color: var(--color-accent);
  background: rgba(255,255,255,0.05);
}

/* -------- Utility -------- */
.hidden {
  display: none !important;
}

.mono {
  font-family: var(--font-mono);
}

.muted {
  color: var(--color-muted);
}