/* =============================================
   CustomsBroker.com — Base / Design Tokens
   Airbnb Design System
   ============================================= */

/* --- Google Fonts: Plus Jakarta Sans --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* --- CSS Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; }
table { border-collapse: collapse; }

/* --- Airbnb Palette Tokens --- */
:root {
  /* Airbnb Brand */
  --rausch:        #ff385c;
  --rausch-dark:   #e00b41;
  --rausch-deep:   #c13515;

  /* Near-blacks & Grays */
  --gray-222:  #222222;
  --gray-3f:   #3f3f3f;
  --gray-6a:   #6a6a6a;
  --gray-92:   #929292;
  --gray-c1:   #c1c1c1;
  --gray-e0:   #e0e0e0;
  --gray-f2:   #f2f2f2;
  --gray-f7:   #f7f7f7;

  /* Kept for legacy references (no longer navy) */
  --navy-50:   #f7f7f7;
  --navy-100:  #f2f2f2;
  --navy-200:  #e0e0e0;
  --navy-300:  #c1c1c1;
  --navy-400:  #929292;
  --navy-500:  #6a6a6a;
  --navy-600:  #3f3f3f;
  --navy-700:  #2d2d2d;
  --navy-800:  #252525;
  --navy-900:  #222222;
  --navy-950:  #1a1a1a;

  /* Teal remapped to Rausch for accent compatibility */
  --teal-50:   #fff0f3;
  --teal-100:  #ffe0e6;
  --teal-200:  #ffb3bf;
  --teal-300:  #ff8099;
  --teal-400:  #ff5c78;
  --teal-500:  #ff385c;
  --teal-600:  #e00b41;
  --teal-700:  #c13515;
  --teal-800:  #8b1a1a;
  --teal-900:  #5c0f0f;

  /* Neutral Scale */
  --gray-50:   #f7f7f7;
  --gray-100:  #f2f2f2;
  --gray-200:  #e0e0e0;
  --gray-300:  #c1c1c1;
  --gray-400:  #929292;
  --gray-500:  #6a6a6a;
  --gray-600:  #3f3f3f;
  --gray-700:  #2d2d2d;
  --gray-800:  #252525;
  --gray-900:  #222222;

  /* Semantic Tokens */
  --color-primary:        #222222;
  --color-accent:         #ff385c;
  --color-accent-hover:   #e00b41;
  --color-success:        #059669;
  --color-warning:        #d97706;
  --color-error:          #c13515;

  /* Light Theme (default) */
  --bg-primary:        #ffffff;
  --bg-secondary:      #f7f7f7;
  --bg-tertiary:       #f2f2f2;
  --bg-card:           #ffffff;
  --bg-card-hover:     #f7f7f7;
  --bg-overlay:        rgba(34, 34, 34, 0.45);
  --border-color:      #e0e0e0;
  --border-color-strong: #c1c1c1;
  --text-primary:      #222222;
  --text-secondary:    #6a6a6a;
  --text-tertiary:     #929292;
  --text-inverse:      #ffffff;

  /* Airbnb Three-Layer Shadow System */
  --shadow-card:   rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.10) 0px 4px 8px;
  --shadow-hover:  rgba(0,0,0,0.08) 0px 4px 12px;
  --shadow-sm:     rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 3px;
  --shadow-md:     rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.10) 0px 4px 8px;
  --shadow-lg:     rgba(0,0,0,0.04) 0px 0px 0px 1px, rgba(0,0,0,0.08) 0px 4px 12px, rgba(0,0,0,0.12) 0px 8px 24px;
  --shadow-xl:     rgba(0,0,0,0.04) 0px 0px 0px 1px, rgba(0,0,0,0.10) 0px 8px 24px, rgba(0,0,0,0.16) 0px 16px 48px;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --leading-tight:   1.2;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Spacing — 8px base */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Layout */
  --max-width:        1280px;
  --max-width-narrow: 960px;
  --header-height:    64px;

  /* Airbnb Border Radius Scale */
  --radius-sm:   8px;    /* buttons, inputs */
  --radius-md:   8px;    /* standard */
  --radius-lg:   16px;   /* cards */
  --radius-xl:   20px;   /* large cards */
  --radius-full: 9999px; /* pills */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* --- Dark Theme (Airbnb-ish dark, not navy) --- */
[data-theme="dark"] {
  --bg-primary:        #1a1a1a;
  --bg-secondary:      #242424;
  --bg-tertiary:       #2d2d2d;
  --bg-card:           #242424;
  --bg-card-hover:     #2d2d2d;
  --bg-overlay:        rgba(0, 0, 0, 0.65);
  --border-color:      #383838;
  --border-color-strong: #4a4a4a;
  --text-primary:      #f2f2f2;
  --text-secondary:    #929292;
  --text-tertiary:     #6a6a6a;
  --text-inverse:      #222222;
  --shadow-sm:         rgba(0,0,0,0.3) 0px 0px 0px 1px, rgba(0,0,0,0.4) 0px 1px 3px;
  --shadow-md:         rgba(0,0,0,0.3) 0px 0px 0px 1px, rgba(0,0,0,0.4) 0px 2px 6px, rgba(0,0,0,0.5) 0px 4px 8px;
  --shadow-card:       rgba(0,0,0,0.3) 0px 0px 0px 1px, rgba(0,0,0,0.4) 0px 2px 6px, rgba(0,0,0,0.5) 0px 4px 8px;
  --shadow-hover:      rgba(0,0,0,0.5) 0px 4px 12px;
  --shadow-lg:         rgba(0,0,0,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.5) 0px 4px 12px, rgba(0,0,0,0.6) 0px 8px 24px;
  --shadow-xl:         rgba(0,0,0,0.5) 0px 0px 0px 1px, rgba(0,0,0,0.6) 0px 8px 24px, rgba(0,0,0,0.7) 0px 16px 48px;
  --color-primary:     #ff385c;
  --color-accent:      #ff385c;
  --color-accent-hover: #e00b41;

  /* Keep rausch palette unchanged — it's the brand accent */
  --navy-50:   #2d2d2d;
  --navy-100:  #383838;
  --navy-200:  #929292;
  --navy-300:  #6a6a6a;
  --navy-400:  #555555;
  --navy-500:  #3f3f3f;
  --teal-50:   rgba(255,56,92,0.08);
  --teal-100:  rgba(255,56,92,0.12);
  --teal-400:  #ff385c;
  --teal-500:  #ff385c;
  --teal-600:  #e00b41;
  --teal-700:  #c13515;
  --gray-50:   #2d2d2d;
  --gray-100:  #383838;
  --gray-400:  #929292;
  --gray-500:  #6a6a6a;
}

/* --- Base Styles --- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* --- Utility Classes --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: var(--max-width-narrow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Selection */
::selection {
  background-color: rgba(255, 56, 92, 0.15);
  color: var(--text-primary);
}