@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap");

:root {
  /* VectorNets brand palette */
  --black: #000000;
  --bg: #0a0a0a;
  --surface: #121212;
  --surface-raised: #181818;
  --orange: #f47c20;
  --orange-light: #ff8534;
  --orange-glow: rgba(244, 124, 32, 0.35);
  --white: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: rgba(161, 161, 170, 0.85);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --success: #4ade80;

  /* Legacy aliases (mapped to new tokens) */
  --navy: var(--surface);
  --header-bg: var(--black);
  --ivory: var(--bg);
  --sand: var(--surface);
  --gold: var(--orange);
  --gold-light: var(--orange-light);
  --text: var(--text-primary);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);

  --serif: Inter, Helvetica, Arial, sans-serif;
  --sans: Inter, Helvetica, Arial, sans-serif;
  --mono: "DM Mono", monospace;

  --container-max: 1240px;
  --container-gutter: 48px;
}

@media (min-width: 1280px) {
  :root {
    --container-max: 1380px;
    --container-gutter: 56px;
  }
}

@media (min-width: 1536px) {
  :root {
    --container-max: 1520px;
    --container-gutter: 64px;
  }
}

@media (min-width: 1920px) {
  :root {
    --container-max: 1680px;
    --container-gutter: 72px;
  }
}