@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap");

:root {
  color-scheme: dark;
  --font-sans: "Instrument Sans", "Avenir Next", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --surface-950: #061018;
  --surface-940: #062029;
  --surface-930: #091119;
  --surface-920: #0b1621;
  --surface-910: #0e1d2c;
  --surface-900: #0f1b27;
  --surface-890: #122130;
  --surface-880: #132434;
  --surface-870: #142434;
  --surface-860: #162a3d;
  --surface-850: #182b3b;
  --surface-840: #1c3143;
  --surface-830: #214552;
  --surface-820: #36516a;
  --surface-815: #3a556d;
  --surface-810: #4f8d9c;
  --surface-800: #67bac6;
  --surface-790: #081019;
  --info: #52b2d6;
  --info-strong: #4e84e5;
  --success-strong: #22c55e;
  --warning-strong: #f59e0b;
  --text: #ecf4fb;
  --text-muted: #a9bac9;
  --text-soft: #7c92a5;
  --accent: #7dd3c7;
  --accent-strong: #42b8ab;
  --warning: #f5b971;
  --danger: #f27f92;
  --success: #73d08d;
  --app-background:
    radial-gradient(circle at top left, rgba(125, 211, 199, 0.18), transparent 32%),
    radial-gradient(circle at top right, rgba(242, 127, 146, 0.12), transparent 34%),
    linear-gradient(135deg, var(--surface-950), var(--surface-920) 38%, var(--surface-910) 100%);
  --bg: var(--surface-930);
  --bg-elevated: rgba(11, 22, 33, 0.82);
  --bg-panel: rgba(10, 20, 30, 0.92);
  --bg-soft: rgba(146, 205, 255, 0.08);
  --border: rgba(148, 173, 195, 0.18);
  --border-strong: rgba(148, 173, 195, 0.32);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --radius: 24px;
}