/* ============================================================
   VARIABLES.CSS — SmartPillTracker Design Tokens
   All design tokens (colors, shadows, spacing, transitions)
   centralized here for consistent theming across the site.
   ============================================================ */

:root {
  /* ─── Light Theme ─────────────────────────────────────────── */
  --bg: #f8f7f4;
  --bg2: #f2f0ec;
  --surface: #ffffff;
  --border: #e4e1db;
  --text: #1a1916;
  --muted: #7a7670;
  --accent: #2563eb;

  /* ─── 3D Configurator Dark Island ─────────────────────────── */
  --conf-bg: #0f0f0f;
  --conf-surface: #1a1a1a;
  --conf-border: #222222;
  --conf-text: #ffffff;
  --conf-accent: #4080D8;

  /* ─── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 32px rgba(0, 0, 0, 0.08);

  /* ─── Border Radius ───────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ─── Layout ──────────────────────────────────────────────── */
  --max-width: 1100px;
  --nav-height: 68px;

  /* ─── Transitions ─────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}