/* Design tokens for the City Hustles UI. Every colour, size, radius, shadow and timing used by the
   DOM overlays comes from here, so the look can be retuned in one place. */
:root {
  /* Typography. The root size follows the smaller viewport side, so rem-based UI scales the same
     way on phones, laptops and large monitors. */
  --font-ui: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --fs-2xs: 0.64rem;
  --fs-xs: 0.72rem;
  --fs-sm: 0.84rem;
  --fs-md: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.55rem;
  --fs-2xl: 2rem;
  --fs-hero: clamp(2.8rem, 10vmin, 6.5rem);
  --lh-tight: 1.15;
  --lh-body: 1.5;
  --tracking-label: 0.08em;
  --tracking-wide: 0.14em;

  /* Palette. */
  --night-950: #0f0a1c;
  --night-900: #160f2a;
  --night-800: #211741;
  --purple-900: #2a0f57;
  --purple-700: #5a1fc2;
  --purple-600: #7b2ff7;
  --purple-500: #9656ff;
  --purple-300: #c9a8ff;
  --lilac-200: #e4dcf5;
  --lilac-100: #eee9f8;
  --lilac-50: #f5f2fb;
  --pink-500: #ff4f8b;
  --coral-500: #ff5d73;
  --orange-400: #ff9a4d;
  --peach-300: #ffc28a;
  --gold-400: #ffc93c;
  --teal-500: #1fb3a3;
  --green-500: #22a06b;
  --cream: #f8f8f8;
  --paper: #fcfbf8;
  --ink-900: #1c1530;
  --ink-700: #3a3150;
  --ink-500: #6a6280;
  --ink-400: #8e87a2;
  --white: #ffffff;

  /* Semantic colours. */
  --surface: var(--cream);
  --surface-raised: var(--white);
  --surface-muted: var(--lilac-100);
  --text: var(--ink-900);
  --text-soft: var(--ink-500);
  --text-on-accent: var(--white);
  --accent: var(--purple-600);
  --accent-strong: var(--purple-700);
  --accent-grad: linear-gradient(145deg, #9a4dff 0%, #7b2ff7 45%, #5a1fc2 100%);
  --warm-grad: linear-gradient(135deg, #ff4f8b 0%, #ff9a4d 100%);
  --glass: rgba(20, 13, 38, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --scrim: rgba(12, 6, 26, 0.55);
  --sunset: linear-gradient(180deg,
      #160b33 0%, #2c1161 22%, #5a1d8c 40%, #9c2f8f 55%, #e0527e 70%, #ff7b62 84%, #ffb36b 100%);

  /* Stat accents (shared by career cards, the phone and summaries). */
  --stat-energy: #f5b50b;
  --stat-fullness: #ff7a3d;
  --stat-hygiene: #1eaee0;
  --stat-fun: #9b5cff;
  --stat-charisma: #ff3d7f;
  --stat-fitness: #12a88f;
  --stat-smarts: #4c6fff;
  --stat-culture: #c34dff;
  --stat-money: #22a06b;

  /* Shape. */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation. */
  --shadow-sm: 0 2px 8px rgba(20, 10, 40, 0.16);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 64px rgba(12, 4, 32, 0.45);
  --shadow-accent: 0 14px 34px rgba(123, 47, 247, 0.45);

  /* Spacing. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Motion. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.5, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 420ms;

  /* Safe areas (notches, home indicators). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}