/* ============================================================
   Ship Eden LLC — design tokens (the foundation Tailwind sits on)
   Ported from the original styles.css so colours, typography and
   dark mode are pixel-identical to the React build. Tailwind's
   colour utilities are wired to these CSS variables (see
   tailwind.config.js), so `text-navy-900`, `bg-surface-card`, etc.
   automatically flip under [data-theme="dark"].
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Brand: Navy (primary — SHIP) ---- */
  --navy-50:#EAF1F8; --navy-100:#C9DAEC; --navy-200:#98B6D6; --navy-300:#6189B5;
  --navy-400:#386493; --navy-500:#1B4571; --navy-600:#123A60; --navy-700:#0E2C50;
  --navy-800:#0A2440; --navy-900:#061B31;

  /* ---- Brand: Green (secondary — EDEN) ---- */
  --green-50:#E9F8EC; --green-100:#CCEFD4; --green-200:#A0DEAD; --green-300:#6FCB82;
  --green-400:#43B85C; --green-500:#2E9E45; --green-600:#1B7A37; --green-700:#136C34;
  --green-800:#0E5128; --green-900:#0A3A1D; --leaf:#4FA938;

  /* ---- Brand: Gold (accent — the "spark") ---- */
  --gold-50:#FEF7E0; --gold-100:#FCEBB0; --gold-200:#FADD79; --gold-300:#F8CE48;
  --gold-400:#F4C01E; --gold-500:#F1B40A; --gold-600:#CE9706; --gold-700:#9C7204; --gold-800:#6E5103;

  /* ---- Brand: Sky (ocean / air freight) ---- */
  --sky-50:#E7F4FC; --sky-100:#C4E6FA; --sky-200:#8ED0F3; --sky-300:#54B8EC;
  --sky-400:#2BA6E0; --sky-500:#1487C2; --sky-600:#106A9B; --sky-700:#0E567E;
  --sky-800:#0B4462; --sky-900:#083247;

  /* ---- Neutrals (cool grey) ---- */
  --white:#FFFFFF; --black:#0A0F1A;
  --gray-50:#F6F8FB; --gray-100:#EEF2F7; --gray-200:#E0E5EC; --gray-300:#CAD2DD;
  --gray-400:#97A2B2; --gray-500:#687585; --gray-600:#4B5867; --gray-700:#344150;
  --gray-800:#222D3A; --gray-900:#101A27;

  /* ---- Status reds ---- */
  --red-100:#FBEAEA; --red-500:#D64545; --red-600:#BE3A3A;

  /* ---- Semantic aliases ---- */
  --brand:var(--navy-600); --brand-strong:var(--navy-800); --brand-soft:var(--navy-50);
  --secondary:var(--green-700); --secondary-soft:var(--green-50);
  --accent:var(--gold-500); --accent-strong:var(--gold-600); --accent-soft:var(--gold-50);
  --info:var(--sky-400); --info-soft:var(--sky-50);
  --success:var(--green-500); --success-soft:var(--green-50);
  --warning:var(--gold-500); --warning-soft:var(--gold-50);
  --danger:var(--red-500); --danger-soft:var(--red-100);

  --surface-page:#FFFFFF; --surface-subtle:#F4F7FB; --surface-card:#FFFFFF;
  --surface-sunken:#EEF2F8; --surface-inverse:var(--navy-700); --surface-inverse-2:var(--navy-800);

  --text-strong:var(--gray-900); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  --text-subtle:var(--gray-400); --text-on-brand:#FFFFFF; --text-on-accent:var(--navy-900);
  --text-link:var(--navy-600);

  --border:var(--gray-200); --border-strong:var(--gray-300); --border-brand:var(--navy-200);
  --ring:var(--sky-400); --ring-focus:0 0 0 3px rgba(43,166,224,0.35);

  --grad-horizon:linear-gradient(135deg, var(--navy-700) 0%, var(--navy-600) 46%, var(--sky-600) 100%);
  --grad-route:linear-gradient(90deg, var(--gold-500), var(--green-500));
  --grad-spark:linear-gradient(120deg, var(--gold-300), var(--gold-500));

  /* ---- Typography ---- */
  --font-display:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --font-sans:'Manrope','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem;
  --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem; --text-6xl:3.75rem; --text-7xl:4.5rem;
  --lh-tight:1.12; --lh-snug:1.28; --lh-normal:1.55; --lh-relaxed:1.7;
  --ls-tighter:-0.03em; --ls-tight:-0.018em; --ls-normal:0em; --ls-wide:0.02em; --ls-wider:0.06em; --ls-mono:0.02em;

  /* ---- Spacing & layout ---- */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --control-sm:38px; --control-md:46px; --control-lg:56px;
  --gutter:1.5rem; --container:1080px; --container-wide:1320px;

  /* ---- Radius, elevation & motion ---- */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:26px;
  --radius-2xl:34px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(16,23,38,0.06); --shadow-sm:0 2px 8px rgba(16,23,38,0.06);
  --shadow-md:0 8px 24px rgba(16,23,38,0.08); --shadow-lg:0 18px 48px rgba(16,23,38,0.12);
  --shadow-xl:0 30px 70px rgba(16,23,38,0.16); --shadow-float:0 14px 40px rgba(16,23,38,0.14);
  --shadow-cta:0 12px 28px rgba(31,46,107,0.30); --shadow-gold:0 12px 26px rgba(244,190,16,0.40);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-in-out:cubic-bezier(0.4,0,0.2,1); --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

  /* ---- App-level glass + header surface tokens (theme aware) ---- */
  --se-glass:rgba(255,255,255,0.6);
  --se-glass-brd:rgba(14,44,80,0.14);
  --se-header:rgba(255,255,255,0.8);
}

/* ============================================================
   Dark theme — remap the semantic + brand tokens
   ============================================================ */
[data-theme='dark'] {
  --surface-page:#0a1a2e; --surface-subtle:#0f2438; --surface-card:#15304a; --surface-sunken:#0c2034;
  --text-strong:#eaf1f8; --text-body:#c4d4e6; --text-muted:#93a8c2; --text-subtle:#6e859e;
  --border:rgba(255,255,255,0.1); --border-strong:rgba(255,255,255,0.2);
  --navy-50:rgba(125,165,216,0.16); --sky-50:rgba(43,166,224,0.18); --green-50:rgba(79,169,56,0.18);
  --gold-50:rgba(241,180,10,0.18); --red-100:rgba(214,69,69,0.22);
  --green-100:rgba(79,169,56,0.3); --green-200:rgba(79,169,56,0.42);
  --navy-100:#b2c6e2; --navy-200:#9db1ca; --navy-300:#8398b4;
  --navy-600:#a6c0e0; --navy-700:#c2d3e8; --navy-800:#eaf1f8; --navy-900:#f2f7fc;
  --sky-500:#54b8ec; --sky-600:#6cc4f0;
  --green-600:#5fcb7e; --green-700:#5fcb7e; --green-800:#9de3ae;
  --gold-600:#f4c01e; --gold-700:#f8ce48;
  --se-glass:rgba(255,255,255,0.1); --se-glass-brd:rgba(255,255,255,0.2); --se-header:rgba(9,22,38,0.85);
  --grad-horizon:linear-gradient(135deg,#0e2c50 0%,#16456e 46%,#106a9b 100%);
}

/* Logo legibility on the dark nav: drop it on a small white chip */
[data-theme='dark'] header a.se-logo img {
  background:#fff; padding:5px 9px; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.35);
}

/* ============================================================
   Helpers / interactions
   ============================================================ */
::selection { background: var(--gold-200); color: var(--navy-800); }

.se-tracking-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-mono);
  font-weight: var(--fw-medium);
}

@keyframes seSpin { to { transform: rotate(360deg); } }
.se-spin { animation: seSpin 0.9s linear infinite; }
.se-link:hover { color: var(--navy-900) !important; }
.se-row:hover { background: var(--surface-subtle); }

/* Cards lift on hover, matching the React ServiceCard interaction */
.se-card-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.se-card-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---- Responsive nav: hamburger under 860px ---- */
.se-burger { display: none; }
@media (max-width: 860px) {
  .se-desktop { display: none !important; }
  .se-burger { display: inline-flex; }
}

/* ============================================================
   Inline icons (lucide sprite via <use>). The 24-unit stroke
   scales with the rendered size, exactly like lucide-react.
   ============================================================ */
.ic {
  display: inline-flex; vertical-align: middle; flex: 0 0 auto;
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}