:root {
  /* ===============================
     Layout
     =============================== */

  --max: 1200px;

  /* ===============================
     Fonts
     =============================== */

  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* ===============================
     Backgrounds
     =============================== */

  --bg0: #070A12;
  --bg1: #090E1C;

  /* ===============================
     Text
     =============================== */

  --text: rgba(255, 255, 255, 0.92);
  --panel-text: rgba(255, 255, 255, 0.82);
  --muted: rgba(255, 255, 255, 0.66);

  /* ===============================
     Surfaces (glass)
     =============================== */

  --surface: rgba(16, 20, 40, 0.72);
  --surface2: rgba(18, 22, 48, 0.62);
  --surface3: rgba(22, 26, 60, 0.52);

  /* ===============================
     Soft fills
     =============================== */

  --soft: rgba(255, 255, 255, 0.10);
  --soft2: rgba(255, 255, 255, 0.06);

  /* ===============================
     Accents
     =============================== */

  --blue: #4C7DFF;
  --indigo: #8A5CFF;
  --violet: #B58CFF;

  --accent: var(--blue);
  --accent-soft: rgba(76, 125, 255, 0.22);

  /* ===============================
     Hero chips (ADDED, SAFE)
     =============================== */

  --chip-bg: rgba(18, 22, 48, 0.55);
  --chip-border: rgba(255, 255, 255, 0.12);

  /* ===============================
     Borders
     =============================== */

  --border: rgba(255, 255, 255, 0.18);
  --border2: rgba(255, 255, 255, 0.10);

  /* ===============================
     Radius
     =============================== */

  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 26px;

  /* ===============================
     Shadows
     =============================== */

  --shadow: 0 26px 90px rgba(0, 0, 0, 0.55);
  --shadow2: 0 20px 60px rgba(0, 0, 0, 0.38);

  /* ===============================
     Motion
     =============================== */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
