/* ================================================================
   UPAYOG PRO — Design Tokens & CSS Variables
   Mobile-first, safe-area aware, production-grade
   Updated: Enhanced dashboard tokens, improved visual polish
================================================================ */

:root {
  /* ── Color Palette ── */
  --bg: #f0f4fa;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --surface3: #f1f5f9;
  --border: #e2e8f0;
  --border2: #cbd5e1;
  --border3: #b8c7de;

  /* ── Text ── */
  --text: #0f172a;
  --text2: #334155;
  --text3: #64748b;
  --text4: #94a3b8;

  /* ── Brand / Accent ── */
  --accent: #2563eb;
  --accent-d: #1d4ed8;
  --accent-l: #eff6ff;
  --accent-m: #bfdbfe;

  /* ── Semantic Colors ── */
  --green:  #059669; --green-l:  #ecfdf5; --green-m:  #a7f3d0;
  --red:    #dc2626; --red-l:    #fef2f2; --red-m:    #fecaca;
  --amber:  #d97706; --amber-l:  #fffbeb; --amber-m:  #fde68a;
  --purple: #7c3aed; --purple-l: #f5f3ff; --purple-m: #ddd6fe;
  --cyan:   #0891b2; --cyan-l:   #ecfeff; --cyan-m:   #a5f3fc;
  --pink:   #db2777; --pink-l:   #fdf2f8; --pink-m:   #fbcfe8;

  /* ── Dashboard Card Gradients ── */
  --grad-blue:   linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --grad-green:  linear-gradient(135deg, #059669 0%, #047857 100%);
  --grad-amber:  linear-gradient(135deg, #d97706 0%, #b45309 100%);
  --grad-red:    linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  --grad-purple: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  --grad-cyan:   linear-gradient(135deg, #0891b2 0%, #0e7490 100%);

  /* ── Layout ── */
  --sidebar: 240px;
  --topbar-h: 58px;
  --bottom-nav-h: 64px;
  --bottom-nav-safe: 0px;

  /* ── Safe Area Insets (iOS notch / home indicator) ── */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* ── Touch target minimum ── */
  --touch-min: 48px;

  /* ── Shape ── */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow:    0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08);
  --shadow-up: 0 -4px 20px rgba(0,0,0,.08), 0 -1px 4px rgba(0,0,0,.04);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,.06);
  --shadow-colored-blue:   0 4px 20px rgba(37,99,235,.28);
  --shadow-colored-green:  0 4px 20px rgba(5,150,105,.28);
  --shadow-colored-amber:  0 4px 20px rgba(217,119,6,.28);
  --shadow-colored-red:    0 4px 20px rgba(220,38,38,.28);
  --shadow-colored-purple: 0 4px 20px rgba(124,58,237,.28);
  --shadow-colored-cyan:   0 4px 20px rgba(8,145,178,.28);

  /* ── Typography ── */
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* ── Transitions ── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    0.12s;
  --dur:         0.2s;
  --dur-slow:    0.35s;
}

/* ── Notched phone support ── */
@supports (padding: env(safe-area-inset-bottom)) {
  :root {
    --bottom-nav-safe: env(safe-area-inset-bottom, 0px);
  }
}

/* ── Dark Mode (future-ready) ── */
@media (prefers-color-scheme: dark) {
  .dark-auto {
    --bg:       #0f172a;
    --surface:  #1e293b;
    --surface2: #162032;
    --surface3: #1e2d40;
    --border:   #1e3a5f;
    --border2:  #2a4a70;
    --text:     #f1f5f9;
    --text2:    #cbd5e1;
    --text3:    #94a3b8;
    --text4:    #64748b;
  }
}