/* ==============================================
   SWOOP — Shared Design Tokens & Base Styles
   Used by: landing/index.html, orders/public/index.html
   ============================================== */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Design Tokens ── */
:root {
  --teal: #2A9D8F;
  --teal-dark: #1E7A6E;
  --teal-light: #3DC4B4;
  --dark: #1A2332;
  --dark-soft: #263244;
  --cream: #F8F6F1;
  --cream-dark: #EDE9E0;
  --warm-white: #FFFDF9;
  --text: #2C3E50;
  --text-soft: #5A6B7D;
  --accent-coral: #E8805A;
  --accent-gold: #D4A843;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 4px 24px rgba(26,35,50,0.06);
  --shadow-card: 0 8px 40px rgba(26,35,50,0.08);
  --shadow-elevated: 0 16px 64px rgba(26,35,50,0.12);
}

/* ── Base ── */
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--warm-white);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; line-height: 1.15; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── Language toggle ── */
[data-lang="fr"] [data-en] { display: none !important; }
[data-lang="en"] [data-fr] { display: none !important; }

/* ── Nav ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,253,249,0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(42,157,143,0.08);
  transition: box-shadow 0.3s;
}
nav.scrolled { box-shadow: var(--shadow-soft); }
nav .nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: 1180px; margin: 0 auto;
}
.logo-area { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.logo-text { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--dark); letter-spacing: -0.5px; }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.lang-switch {
  display: flex; background: var(--cream); border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(42,157,143,0.12);
}
.lang-btn {
  padding: 6px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: none; background: transparent; color: var(--text-soft);
  font-family: 'Outfit', sans-serif; transition: all 0.25s;
}
.lang-btn.active { background: var(--teal); color: white; }

/* ── Footer ── */
footer {
  padding: 40px 0; background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  flex-wrap: wrap; gap: 12px;
}
.footer-logo { display: flex; align-items: center; gap: 8px; }
.footer-logo .logo-text { color: white; font-size: 1.1rem; }
footer p { font-size: 0.8rem; color: rgba(255,255,255,0.35); }
footer .strikethrough { text-decoration: line-through; opacity: 0.55; }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Shared animations ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }