/* =============================================================
   Fedex Booking Portal — built on Locate2u design foundations
   FedEx-style purple + orange palette, Roboto type system.
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Brand (FedEx-style) — overridable by Tweaks ---- */
  --brand: #4D148C;            /* FedEx purple — primary surface / nav */
  --brand-700: #3a0f6b;
  --brand-900: #260a45;
  --brand-soft: #F2ECFA;       /* tinted purple wash */
  --accent: #FF6600;           /* FedEx orange — CTAs / actions */
  --accent-600: #e65c00;
  --accent-700: #cc5200;
  --accent-soft: #FFF0E5;

  /* ---- Neutrals (Locate2u foundation) ---- */
  --bg-page: rgb(251, 250, 247);
  --bg-mist: #EFF2F6;
  --bg-mist-2: #E7EBF1;
  --surface: #ffffff;
  --border: rgb(226, 228, 234);
  --border-strong: rgb(208, 213, 224);

  /* ---- Text ---- */
  --fg-strong: #1E1633;        /* near-black, faint purple */
  --fg-body: rgb(74, 78, 100);
  --fg-mute: rgb(120, 124, 146);
  --fg-faint: rgb(160, 164, 184);
  --fg-on-dark: #ffffff;
  --fg-on-dark-mute: rgba(255,255,255,0.62);

  /* ---- Semantic ---- */
  --success: rgb(34, 184, 110);
  --success-soft: #E7F8EF;
  --warn: rgb(244, 161, 29);
  --warn-soft: #FEF4E2;
  --danger: #E5484D;
  --danger-soft: #FCEDEC;
  --info: #2B93FF;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(30, 22, 51, 0.05);
  --shadow-card: 0 1px 2px rgba(30, 22, 51, 0.04), 0 6px 20px rgba(30, 22, 51, 0.06);
  --shadow-md: 0 4px 14px rgba(30, 22, 51, 0.10);
  --shadow-pop: 0 10px 30px rgba(30, 22, 51, 0.16);
  --shadow-cta: 0 8px 22px rgba(255, 102, 0, 0.30);

  /* ---- Radius ---- */
  --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 14px;
  --r-xl: 16px; --r-2xl: 20px; --r-3xl: 26px; --r-pill: 999px;

  /* ---- Type ---- */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-w: 248px;
  --topbar-h: 68px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--fg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(30,22,51,0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(30,22,51,0.28); background-clip: padding-box; }

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

/* ---- Reusable type helpers ---- */
.eyebrow {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-700);
}
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Animations ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,184,110,0.5);} 70% { box-shadow: 0 0 0 7px rgba(34,184,110,0);} }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp 0.4s cubic-bezier(0.2,0.8,0.2,1) both; }
  .fade-in { animation: fadeIn 0.3s ease both; }
}

@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; inset: 0; margin: 0; }
  .no-print { display: none !important; }
}