/* ═══════════════════════════════════════════════════════════════
   Growmatic Design System — Tokens
   Data-Dense Dashboard / Financial Dashboard
   Generated with UI UX Pro Max
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Primary ─── */
  --gm-primary: #00e87b;
  --gm-primary-hover: #00cc6a;
  --gm-primary-dim: rgba(0, 232, 123, .10);
  --gm-primary-glow: rgba(0, 232, 123, .25);

  /* ─── Accent (brand continuity with landing) ─── */
  --gm-accent: #4ecdc4;
  --gm-accent-hover: #3dbdb4;
  --gm-accent-dim: rgba(78, 205, 196, .10);
  --gm-accent-glow: rgba(78, 205, 196, .20);

  /* ─── Semantic ─── */
  --gm-success: #00e87b;
  --gm-success-dim: rgba(0, 232, 123, .10);
  --gm-info: #4da6ff;
  --gm-info-dim: rgba(77, 166, 255, .10);
  --gm-warning: #ffb833;
  --gm-warning-dim: rgba(255, 184, 51, .10);
  --gm-danger: #ff5252;
  --gm-danger-dim: rgba(255, 82, 82, .10);

  /* ─── Platform Accents ─── */
  --gm-amazon: #fb923c;
  --gm-amazon-dim: rgba(251, 146, 60, .10);
  --gm-ml: #ffb833;
  --gm-ml-dim: rgba(255, 184, 51, .10);

  /* ─── Surfaces (dark theme) ─── */
  --gm-bg: #06080c;
  --gm-surface-1: #0c1017;
  --gm-surface-2: #111820;
  --gm-surface-3: #141c26;

  /* ─── Borders ─── */
  --gm-border-1: #1a2332;
  --gm-border-2: #243044;

  /* ─── Text ─── */
  --gm-text-1: #e4e8f0;
  --gm-text-2: #7a8ba0;
  --gm-text-3: #4a5568;

  /* ─── Data Visualization Palette ─── */
  --gm-purple: #a78bfa;
  --gm-purple-dim: rgba(167, 139, 250, .10);
  --gm-cyan: #22d3ee;
  --gm-cyan-dim: rgba(34, 211, 238, .10);
  --gm-pink: #e84d8a;
  --gm-pink-dim: rgba(232, 77, 138, .10);
  --gm-lime: #c2e03a;
  --gm-lime-dim: rgba(194, 224, 58, .10);

  /* ─── Typography ─── */
  --gm-font-display: 'Outfit', sans-serif;
  --gm-font-body: 'DM Sans', sans-serif;
  --gm-font-mono: 'JetBrains Mono', monospace;

  /* ─── Type Scale ─── */
  --gm-text-xs: 10px;
  --gm-text-sm: 12px;
  --gm-text-base: 14px;
  --gm-text-lg: 16px;
  --gm-text-xl: 20px;
  --gm-text-2xl: 28px;
  --gm-text-3xl: 36px;

  /* ─── Font Weights ─── */
  --gm-font-normal: 400;
  --gm-font-medium: 500;
  --gm-font-semibold: 600;
  --gm-font-bold: 700;

  /* ─── Border Radius ─── */
  --gm-radius-xs: 6px;
  --gm-radius-sm: 8px;
  --gm-radius-md: 12px;
  --gm-radius-lg: 16px;
  --gm-radius-xl: 20px;

  /* ─── Spacing (8dp system) ─── */
  --gm-space-2xs: 2px;
  --gm-space-xs: 4px;
  --gm-space-sm: 8px;
  --gm-space-md: 14px;
  --gm-space-lg: 22px;
  --gm-space-xl: 32px;
  --gm-space-2xl: 48px;

  /* ─── Shadows ─── */
  --gm-shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);
  --gm-shadow-md: 0 4px 16px rgba(0, 0, 0, .25);
  --gm-shadow-lg: 0 12px 40px rgba(0, 0, 0, .3);
  --gm-shadow-glow: 0 0 24px var(--gm-primary-glow);

  /* ─── Transitions ─── */
  --gm-transition-fast: 150ms ease;
  --gm-transition-base: 250ms ease;
  --gm-transition-slow: 400ms ease;

  /* ─── Z-Index Scale ─── */
  --gm-z-dropdown: 10;
  --gm-z-sticky: 20;
  --gm-z-overlay: 40;
  --gm-z-modal: 100;
  --gm-z-toast: 1000;

  /* ─── Data-Dense Layout ─── */
  --gm-grid-gap: 14px;
  --gm-card-padding: 22px 24px;
  --gm-card-padding-compact: 14px 16px;
  --gm-table-row-height: 38px;
  --gm-header-height: 60px;
  --gm-max-width: 1400px;
}