/* JB's Health App — design tokens (green / yellow / purple, glassmorphism) */
:root {
  /* Dark, purple-tinted base (sits under the gradient background) */
  --ink-000: #0B0912;
  --ink-100: #141020;
  --ink-200: #1A1526;
  --ink-300: #241D33;
  --ink-400: #332A47;
  --ink-500: #4A3E63;
  --steel-600: #7A6F93;
  --steel-700: #ABA1C4;
  --chalk-100: #ECEAF5;
  --chalk-000: #FFFFFF;

  /* Brand ramps */
  --green-300: #5BF0AE; --green-400: #2FE58F; --green-500: #18D07A; --green-600: #10B368; --green-700: #0C8F53;
  --purple-300: #C4B0FF; --purple-400: #A98BFF; --purple-500: #8B5CF6; --purple-600: #7A45F0;
  --yellow-300: #FFE07A; --yellow-400: #FFD23D; --yellow-500: #F5B60A;

  /* Semantic status */
  --success-500: #2FE58F; --success-bg: rgba(47, 229, 143, 0.14);
  --warn-500: #FFD23D; --warn-bg: rgba(255, 210, 61, 0.14);
  --danger-500: #FF5C6C; --danger-bg: rgba(255, 92, 108, 0.14);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #2FE58F 0%, #18D07A 55%, #10B368 100%);
  --grad-purple: linear-gradient(135deg, #A98BFF 0%, #7A45F0 100%);
  --grad-brand: linear-gradient(135deg, #8B5CF6 0%, #2FE58F 100%);
  --grad-yellow: linear-gradient(135deg, #FFE07A 0%, #FFD23D 55%, #F5B60A 100%);
  --grad-bg:
    radial-gradient(1100px 720px at 16% -8%, rgba(139, 92, 246, 0.30), transparent 60%),
    radial-gradient(920px 660px at 102% 6%, rgba(24, 208, 122, 0.22), transparent 55%),
    radial-gradient(820px 720px at 62% 112%, rgba(255, 210, 61, 0.12), transparent 55%),
    linear-gradient(180deg, #16112400 0%, #0B0912 70%), #0B0912;

  /* Glass */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-2: rgba(255, 255, 255, 0.10);
  --glass-bd: rgba(255, 255, 255, 0.14);
  --glass-hi: rgba(255, 255, 255, 0.22);
  --blur: saturate(150%) blur(18px);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-numeric: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-full: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;

  --border-hair: 1px solid var(--glass-bd);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.38);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.5);

  /* Backward-compat aliases (older rules use these names) — remapped to the new palette */
  --molten-300: var(--green-300);
  --molten-500: var(--green-500);
  --molten-600: var(--green-600);
  --molten-700: var(--green-700);
  --molten-glow: rgba(24, 208, 122, 0.45);
  --grad-molten: var(--grad-primary);
  --grad-steel: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --volt-400: var(--yellow-400);
}