/* ============================================================
   Shiptrack — shared design tokens
   Slate-900 + primary blue, matches existing AE Tracking app
   ============================================================ */

:root {
  /* Brand — Shiptrack green (#22C55E primary, deep #0F3D34 / #176B5B / #0A1F1A) */
  --color-primary-50:  #ecfdf3;
  --color-primary-100: #d1fae0;
  --color-primary-200: #a6f0c1;
  --color-primary-300: #6fdf99;
  --color-primary-400: #3acf76;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a;
  --color-primary-700: #176b5b;
  --color-primary-800: #0f3d34;
  --color-primary-900: #0a1f1a;

  /* Slate (chrome) — green-tinted neutrals to match deep brand backgrounds */
  --color-slate-50:  #f6faf8;
  --color-slate-100: #ecf2ee;
  --color-slate-200: #dbe5df;
  --color-slate-300: #b9c8c0;
  --color-slate-400: #8aa097;
  --color-slate-500: #5e7770;
  --color-slate-600: #3f5953;
  --color-slate-700: #2a403b;
  --color-slate-800: #173028;
  --color-slate-900: #0a1f1a;
  --color-slate-950: #04110d;

  /* Status */
  --color-emerald-50:  #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;

  --color-amber-50:  #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;

  --color-red-50:  #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;

  --color-violet-50:  #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;

  /* India accent (saffron-ish for trust badges, ₹) */
  --color-saffron: #f97316;
  --color-saffron-50: #fff7ed;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;

  /* Radius */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-2xl: 1.75rem;

  /* Shadow */
  --sh-sm: 0 1px 2px rgb(15 23 42 / 0.05);
  --sh-md: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --sh-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.04);
  --sh-xl: 0 25px 50px -12px rgb(15 23 42 / 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: var(--color-slate-50);
  color: var(--color-slate-900);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv11", "ss01";
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Indian rupee number tabular alignment */
.tabular { font-variant-numeric: tabular-nums; }

/* Subtle grid for hero backgrounds */
.bg-grid {
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(15 23 42 / 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-slate-300); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }