/* ============================================================
   TRAIN WMFS — COLOR TOKENS
   Dark, gritty, athletic. Black canvas + one loud orange.
   ============================================================ */
:root {
  /* --- Base palette --- */
  --wmfs-black: #0A0A0A;       /* page canvas */
  --wmfs-dark: #181818;        /* alternating section / surface */
  --wmfs-card: #1E1E1E;        /* raised card on dark sections */
  --wmfs-white: #FFFFFF;

  /* The brand orange + tints */
  --wmfs-orange: #F97316;      /* primary accent — buttons, labels, numbers */
  --wmfs-orange-hover: #FB923C;/* lighter — hover on solid orange */
  --wmfs-orange-50: rgba(249, 115, 22, 0.50);
  --wmfs-orange-25: rgba(249, 115, 22, 0.25);
  --wmfs-orange-18: rgba(249, 115, 22, 0.18);
  --wmfs-orange-08: rgba(249, 115, 22, 0.08);

  /* Cool neutral used sparingly (avatars, steel accents) */
  --wmfs-steel: #4B5563;

  /* --- White-alpha ladder (text + hairlines on black) --- */
  --wmfs-w-90: rgba(255, 255, 255, 0.90);
  --wmfs-w-65: rgba(255, 255, 255, 0.65);
  --wmfs-w-55: rgba(255, 255, 255, 0.55);
  --wmfs-w-38: rgba(255, 255, 255, 0.38);
  --wmfs-w-25: rgba(255, 255, 255, 0.25);
  --wmfs-w-12: rgba(255, 255, 255, 0.12);
  --wmfs-w-08: rgba(255, 255, 255, 0.08);

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */
  --surface-page: var(--wmfs-black);
  --surface-alt: var(--wmfs-dark);     /* alternating dark band */
  --surface-card: var(--wmfs-card);

  --text-primary: var(--wmfs-white);
  --text-muted: var(--wmfs-w-55);
  --text-faint: var(--wmfs-w-38);
  --text-accent: var(--wmfs-orange);

  --accent: var(--wmfs-orange);
  --accent-hover: var(--wmfs-orange-hover);
  --on-accent: var(--wmfs-black);      /* text sits BLACK on orange */

  --border-hairline: var(--wmfs-w-08);
  --border-strong: var(--wmfs-w-25);
  --border-accent: var(--wmfs-orange-25);
}