/* COLORS — The Rusk Alliance
   Borrowed from VRChat's world: deep navy space, glowing teal-cyan
   outlines, and a punchy biscuit-yellow accent. */

:root {
  /* --- Base palette --- */
  /* Navy — the "space" backdrop */
  --navy-900: #071527;   /* deepest bg */
  --navy-800: #0a1e3a;   /* page bg */
  --navy-700: #10294d;   /* raised panel */
  --navy-600: #16345f;   /* hover panel */
  --navy-500: #1e457a;   /* borders on navy */

  /* Teal — the login-modal / spinner surface */
  --teal-900: #0a2530;
  --teal-800: #0e3441;
  --teal-700: #14808f;   /* mid teal fill */
  --teal-600: #1aa0b3;

  /* Cyan — the glowing accent (outlines, spinner, links) */
  --cyan-500: #2ec6dd;   /* primary accent */
  --cyan-400: #46d4e8;   /* hover / bright edge */
  --cyan-300: #7ee3f2;   /* light tint */
  --cyan-glow: #35d0e8;

  /* Yellow — biscuit / "rusk" accent (CTAs, Early Access pill) */
  --yellow-500: #e6d63a;
  --yellow-400: #f0e455;
  --yellow-600: #cbb92a;

  /* Coral — the goofy secondary (avatar-orange energy) */
  --coral-500: #ff7a4d;
  --coral-400: #ff9670;

  /* Neutrals */
  --white: #ffffff;
  --slate-100: #e7eef7;
  --slate-300: #b3c4dc;
  --slate-400: #8aa0bf;
  --slate-500: #647a99;

  /* --- Semantic aliases --- */
  --bg-page: var(--navy-800);
  --bg-deep: var(--navy-900);
  --surface-card: var(--navy-700);
  --surface-card-hover: var(--navy-600);
  --surface-modal: var(--teal-800);
  --surface-sunken: var(--navy-900);

  --border-default: var(--navy-500);
  --border-accent: var(--cyan-500);
  --border-accent-bright: var(--cyan-400);

  --text-heading: var(--white);
  --text-body: var(--slate-100);
  --text-muted: var(--slate-400);
  --text-on-accent: var(--navy-900);
  --text-link: var(--cyan-400);

  --accent: var(--cyan-500);
  --accent-hover: var(--cyan-400);
  --accent-cta: var(--yellow-500);
  --accent-cta-hover: var(--yellow-400);
  --accent-fun: var(--coral-500);

  --focus-ring: var(--cyan-glow);

  --success: #4bd08a;
  --danger: #ff5d6c;
  --warning: var(--yellow-500);
}