:root {
  /* ── Background layers ────────────────────────────────────────────── */
  --color-bg: #050505;
  --color-surface-lowest: #080808;
  --color-surface-low: #0e0e0e;
  --color-surface: #141414;
  --color-surface-high: #1a1a1a;
  --color-surface-highest: #222222;
  --color-surface-bright: #2c2c2c;

  /* ── Brand — Agricultural Tech ────────────────────────────────────── */
  --color-primary: #22c55e;
  --color-primary-light: #4ade80;
  --color-primary-fixed: #86efac;
  --color-primary-dim: #166534;
  --color-accent: #f59e0b;
  --color-accent-dim: #d97706;
  --color-accent-light: #fbbf24;

  /* ── Text ────────────────────────────────────────────────────────── */
  --color-text: #f0f0f0;
  --color-text-muted: #9ca3af;
  --color-text-dim: #6b7280;
  --color-on-primary: #052e16;
  --color-on-accent: #451a03;

  /* ── Borders & Glow ─────────────────────────────────────────────── */
  --color-outline: rgba(255,255,255,0.12);
  --color-outline-variant: rgba(255,255,255,0.06);
  --glow-primary: 0 0 20px rgba(34,197,94,0.15);
  --glow-accent: 0 0 20px rgba(245,158,11,0.15);
  --glow-primary-strong: 0 0 30px rgba(34,197,94,0.3);

  /* ── Status ─────────────────────────────────────────────────────── */
  --color-error: #ef4444;
  --color-error-light: #fca5a5;
  --color-success: #22c55e;
  --color-info: #3b82f6;

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-headline: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --header-height: 72px;
  --bottom-nav-height: 72px;
  --page-pad: 24px;

  /* ── Modern rounded corners ─────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --border-radius: var(--radius-md);

  /* ── Transitions ────────────────────────────────────────────────── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Elevation / Shadows ────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.7);
}