/* ==========================================================================
   OhSht — Color tokens
   Dark-mode-first. Near-black canvas, bright teal action color,
   rating gradient (red → green) borrowed from the map pins.
   ========================================================================== */

:root {
  /* --- Brand teal (the OhSht color) -------------------------------------- */
  --teal-500: #19E0CE;   /* primary action / bright CTA + accents */
  --teal-400: #45E9DA;   /* hover / lighter glow */
  --teal-600: #12BEAE;   /* pressed */
  --teal-700: #0E9A8E;   /* "Sht" wordmark teal, deep accents */
  --teal-glow: rgba(25, 224, 206, 0.45);   /* neon halo around active items */
  --teal-tint: rgba(25, 224, 206, 0.12);   /* faint fill behind teal content */

  /* --- Neutrals / canvas ------------------------------------------------- */
  --black: #050607;      /* deepest backdrop, map void */
  --ink-900: #0A0C0E;    /* app background */
  --ink-850: #101317;    /* raised background */
  --ink-800: #16191D;    /* card surface */
  --ink-750: #1C2025;    /* card surface (elevated) */
  --ink-700: #23272D;    /* input / chip surface */
  --ink-600: #2C3138;    /* strong border, divider */
  --white: #FFFFFF;

  /* --- Text -------------------------------------------------------------- */
  --gray-100: #EAEDF0;   /* near-white body on dark */
  --gray-300: #B7BEC6;   /* secondary text */
  --gray-400: #9BA3AB;   /* muted / captions */
  --gray-500: #6C737C;   /* placeholder, disabled label */
  --gray-600: #4A5058;   /* faint / "Unknown" meta */

  /* --- Accessibility / info accent (from the blue ♿ badge) --------------- */
  --blue-500: #2E86F0;
  --blue-600: #1F6BD0;

  /* --- Map decoration ---------------------------------------------------- */
  --violet-500: #7B61FF; /* route lines / radius sweep on the map */
  --violet-400: #9C86FF;

  /* --- Rating scale (map pins: 1★ red → 5★ green) ------------------------ */
  --rating-1: #F0453A;   /* red — avoid */
  --rating-2: #F97316;   /* orange */
  --rating-3: #FBB024;   /* amber */
  --rating-4: #B4D335;   /* chartreuse */
  --rating-5: #22C55E;   /* green — great */
  --rating-none: #8A9099;/* gray — unrated */

  /* --- Semantic status --------------------------------------------------- */
  --success: #22C55E;
  --warning: #FBB024;
  --danger: #F0453A;

  /* ======================================================================
     SEMANTIC ALIASES — reach for these in product code
     ====================================================================== */

  /* Surfaces */
  --bg-app: var(--ink-900);
  --bg-raised: var(--ink-850);
  --surface-card: var(--ink-800);
  --surface-card-hi: var(--ink-750);
  --surface-input: var(--ink-700);
  --surface-glass: rgba(20, 24, 29, 0.62);   /* glassmorphism panel fill */

  /* Text */
  --text-primary: var(--white);
  --text-body: var(--gray-100);
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-400);
  --text-placeholder: var(--gray-500);
  --text-faint: var(--gray-600);
  --text-on-teal: #04201D;   /* near-black ink used on bright teal buttons */

  /* Action */
  --action: var(--teal-500);
  --action-hover: var(--teal-400);
  --action-press: var(--teal-600);
  --action-tint: var(--teal-tint);

  /* Lines */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-teal: rgba(25, 224, 206, 0.55);

  /* Links */
  --link: var(--teal-500);
  --link-hover: var(--teal-400);
}