:root {
  --bg: #f4f6f8;
  --shell: #ffffff;
  --line: #d7dde5;
  --line-dark: #c6cdd7;
  --text: #2e3238;
  --muted: #7b8292;
  --heading: #4f5865;
  --green: #2eb67d;
  --blue: #2196f3;
  --purple: #8f66d9;
  --yellow: #f2c14e;
  --red: #ef6a6a;
  --panel-shadow: 0 10px 30px rgba(44, 58, 74, 0.08);
  --editor: #1f1f1f;
  --editor-panel: #252526;
  --editor-line: #313131;
  --editor-text: #d4d4d4;

  /* motion tokens (radiant.co-style: subtle, consistent) */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 220ms;
  --t-slow: 420ms;
  --t-reveal: 640ms;

  /* premium shadow tiers */
  --shadow-sm: 0 1px 2px rgba(28, 29, 32, 0.04), 0 1px 1px rgba(28, 29, 32, 0.04);
  --shadow-md: 0 4px 14px -6px rgba(28, 29, 32, 0.10), 0 2px 4px rgba(28, 29, 32, 0.04);
  --shadow-lg: 0 22px 40px -22px rgba(28, 29, 32, 0.18), 0 8px 16px -10px rgba(28, 29, 32, 0.08);
  --shadow-red: 0 22px 40px -22px rgba(177, 18, 38, 0.30), 0 8px 18px -12px rgba(177, 18, 38, 0.16);

  /* ─── Navigation surface · Radiant-style solid dark ──────────────
   * Decoupled from glass/blur. Reuse for any control sitting on the bar
   * (icon buttons, avatar, future tooling) so contrast stays consistent.
   */
  --nav-bg:           #0c0d10;
  --nav-bg-elevated:  #14161b;     /* hover / pressed surface */
  --nav-fg:           rgba(255, 255, 255, 0.72);
  --nav-fg-active:    #ffffff;
  --nav-fg-muted:     rgba(255, 255, 255, 0.34);
  --nav-divider:      rgba(255, 255, 255, 0.06);
  --nav-border:       rgba(255, 255, 255, 0.10);
  --nav-accent:       #b11226;     /* matches --c-red */
  --nav-accent-glow:  0 0 12px rgba(177, 18, 38, 0.55), 0 0 3px rgba(177, 18, 38, 0.9);

  --header-pad-x:     28px;
  --header-link-pad:  18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Inter, sans-serif;
  color: var(--text);
  background: var(--bg);
}