/* ==========================================================================
   Design tokens — neutral surfaces + a single iOS-blue accent.
   ========================================================================== */

:root {
  /* Accent (the only chromatic colour in the UI) */
  --accent: #007aff;
  --accent-press: #0062cc;
  --accent-soft: rgba(0, 122, 255, 0.12);
  --accent-contrast: #ffffff;

  /* Neutral surfaces */
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --surface-3: #e9e9ee;
  --elevated: #ffffff;

  /* Text */
  --text: #000000;
  --text-2: #6c6c70;
  --text-3: #a3a3a8;

  /* Lines */
  --line: rgba(60, 60, 67, 0.13);
  --line-strong: rgba(60, 60, 67, 0.22);

  /* Feedback */
  --danger: #ff3b30;
  --success: #34c759;
  --flame: #ff9500;

  /* Heat scale (accent-derived, 0 = empty) */
  --heat-0: #e7e7ec;
  --heat-1: #b9d8ff;
  --heat-2: #7db4ff;
  --heat-3: #3f90ff;
  --heat-4: #0062cc;

  /* Shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 160ms;
  --med: 280ms;

  /* Layout */
  --nav-h: 52px;
  --pad: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

html[data-theme="dark"] {
  --accent: #0a84ff;
  --accent-press: #3d9dff;
  --accent-soft: rgba(10, 132, 255, 0.18);

  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --elevated: #1c1c1e;

  --text: #ffffff;
  --text-2: #98989f;
  --text-3: #6c6c70;

  --line: rgba(84, 84, 88, 0.5);
  --line-strong: rgba(120, 120, 128, 0.6);

  --danger: #ff453a;
  --success: #30d158;
  --flame: #ff9f0a;

  --heat-0: #26262b;
  --heat-1: #143a63;
  --heat-2: #17579c;
  --heat-3: #1f78d6;
  --heat-4: #4da2ff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}