/* EastWest2Go — design tokens
   Brand brief: Pampas #F4F3EE, Cloudy #B1ADA1, Crail #C15F3C, white surface.
   We extend with a deeper text ink, a warm dark-mode pair, and supporting tones.
*/

:root {
  /* ── Brand foundation ── */
  --pampas: #F4F3EE;
  --pampas-2: #EDEBE3;
  --cloudy: #B1ADA1;
  --crail: #C15F3C;
  --crail-dark: #A24E2E;
  --crail-soft: #E8C9BA;
  --crail-wash: #F6E7DE;

  /* ── Surfaces ── */
  --bg: var(--pampas);
  --surface: #FFFFFF;
  --surface-2: #FBFAF6;
  --surface-3: #EFEDE5;
  --line: rgba(40, 30, 20, 0.08);
  --line-2: rgba(40, 30, 20, 0.14);

  /* ── Text ── */
  --ink: #1F1B16;            /* primary text */
  --ink-2: #4A453D;          /* secondary text */
  --ink-3: var(--cloudy);    /* tertiary, captions */
  --ink-on-accent: #FFFFFF;

  /* ── Accents ── */
  --accent: var(--crail);
  --accent-ink: #FFFFFF;
  --positive: #4F7A4A;
  --warn: #B8843A;
  --error: #B8442C;

  /* ── Type ── */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
  --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;

  /* ── Radius / shadow ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31,27,22,.04), 0 2px 8px rgba(31,27,22,.04);
  --shadow-md: 0 2px 6px rgba(31,27,22,.06), 0 12px 32px rgba(31,27,22,.08);
  --shadow-lg: 0 8px 24px rgba(31,27,22,.10), 0 24px 64px rgba(31,27,22,.14);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,.6);

  /* ── Motion ── */
  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] {
  --bg: #161310;
  --surface: #1F1B17;
  --surface-2: #1A1714;
  --surface-3: #26221D;
  --line: rgba(255, 248, 235, 0.08);
  --line-2: rgba(255, 248, 235, 0.16);
  --ink: #F4F0E8;
  --ink-2: #BFB6A6;
  --ink-3: #8A8275;
  --crail-wash: #2C1F18;
  --crail-soft: #4A2D20;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 2px 6px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.6);
}

/* ── App-scoped reset (we're inside an artboard, don't clobber DC) ── */
.ew-app, .ew-app * { box-sizing: border-box; }
.ew-app {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: 'ss01','cv11';
  -webkit-font-smoothing: antialiased;
}
.ew-app h1, .ew-app h2, .ew-app h3, .ew-app h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.ew-app p { margin: 0; text-wrap: pretty; }
.ew-app button { font-family: inherit; cursor: pointer; }
.ew-app a { color: inherit; text-decoration: none; }
.ew-app input, .ew-app textarea, .ew-app select { font-family: inherit; color: inherit; }

/* ── Buttons ── */
.ew-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.ew-btn:hover { transform: translateY(-1px); }
.ew-btn:active { transform: translateY(0); }
.ew-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 16px rgba(193,95,60,.28);
}
.ew-btn--primary:hover { background: var(--crail-dark); }
.ew-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.ew-btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
.ew-btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.ew-btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }

/* ── Tag / chip ── */
.ew-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.ew-chip--accent { background: var(--crail-wash); color: var(--crail-dark); border-color: transparent; }
[data-theme="dark"] .ew-chip--accent { color: #E8B295; }

/* ── Card ── */
.ew-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ── Animated underline / link ── */
.ew-link {
  position: relative; display: inline-block; padding-bottom: 2px;
}
.ew-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.ew-link:hover::after { transform: scaleX(1); }

/* ── Eyebrow label ── */
.ew-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
}
.ew-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.6;
}

/* ── Striped placeholder image ── */
.ew-imgholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(193,95,60,.08) 0 8px,
      rgba(193,95,60,.02) 8px 16px),
    var(--surface-3);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  display: flex; align-items: flex-end;
  padding: 14px;
  overflow: hidden;
}
.ew-imgholder::before {
  content: ''; position: absolute; top: 14px; left: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  opacity: .8;
}
.ew-imgholder--warm {
  background:
    repeating-linear-gradient(135deg,
      rgba(193,95,60,.16) 0 10px,
      rgba(193,95,60,.04) 10px 20px),
    var(--crail-wash);
  color: var(--crail-dark);
}
[data-theme="dark"] .ew-imgholder--warm { color: #E8B295; }
.ew-imgholder--cool {
  background:
    repeating-linear-gradient(135deg,
      rgba(74,93,110,.14) 0 10px,
      rgba(74,93,110,.04) 10px 20px),
    var(--surface-3);
}

/* ── Number ticker ── */
.ew-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: -0.04em;
}

/* ── Scroll utilities ── */
.ew-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.ew-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.ew-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.ew-scroll::-webkit-scrollbar-track { background: transparent; }

/* ── Form fields ── */
.ew-field {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ew-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(193,95,60,.12);
}
.ew-field--ta { height: auto; padding: 14px 16px; min-height: 96px; resize: vertical; }
.ew-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}

/* ── Section helpers ── */
.ew-section {
  padding: 96px 64px;
  position: relative;
}
.ew-section--tight { padding: 72px 64px; }
.ew-section--accent { background: var(--crail-wash); }
.ew-section--ink { background: var(--ink); color: var(--pampas); }
.ew-section--ink h1, .ew-section--ink h2, .ew-section--ink h3 { color: var(--pampas); }

.ew-h-display { font-size: 88px; line-height: 0.95; letter-spacing: -0.04em; }
.ew-h1 { font-size: 56px; line-height: 1.02; }
.ew-h2 { font-size: 40px; line-height: 1.08; }
.ew-h3 { font-size: 26px; line-height: 1.18; }
.ew-h4 { font-size: 20px; line-height: 1.25; }
.ew-lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }

/* Accent treatment on display headings (was italic Fraunces; now color-only since fonts are all sans) */
.ew-italic { font-weight: 500; color: var(--accent); }

/* ── Marquee divider ── */
.ew-divider {
  height: 1px; background: var(--line); width: 100%;
}
.ew-divider--dashed {
  border: none; border-top: 1px dashed var(--line-2); height: 0;
}

/* ── Mobile artboard scaling ── */
.ew-app[data-device="mobile"] { font-size: 13px; }
.ew-app[data-device="mobile"] .ew-section { padding: 56px 22px; }
.ew-app[data-device="mobile"] .ew-h-display { font-size: 44px; }
.ew-app[data-device="mobile"] .ew-h1 { font-size: 32px; }
.ew-app[data-device="mobile"] .ew-h2 { font-size: 26px; }
.ew-app[data-device="mobile"] .ew-h3 { font-size: 20px; }
.ew-app[data-device="mobile"] .ew-lede { font-size: 15px; }

/* ── Spinner ── */
@keyframes ew-spin { to { transform: rotate(360deg); } }
.ew-spin { animation: ew-spin 1s linear infinite; }

/* ── Subtle entrance ── */
@keyframes ew-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ew-rise { animation: ew-rise .6s var(--ease-out) both; }

/* ── Globe arc dash ── */
@keyframes ew-arc {
  to { stroke-dashoffset: 0; }
}
@keyframes ew-pulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* ── Marquee ── */
@keyframes ew-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Responsive — mirrors data-device="mobile" + extras ── */
@media (max-width: 767px) {
  .ew-app { font-size: 13px; }
  .ew-app .ew-section { padding: 56px 20px; }
  .ew-app .ew-section--tight { padding: 40px 20px; }
  .ew-app .ew-h-display { font-size: 42px; line-height: 1; }
  .ew-app .ew-h1 { font-size: 30px; }
  .ew-app .ew-h2 { font-size: 24px; }
  .ew-app .ew-h3 { font-size: 19px; }
  .ew-app .ew-lede { font-size: 15px; }

  /* table: make scrollable on small screens */
  .ew-app .ew-card table { font-size: 11px; }
  .ew-app .ew-card table th,
  .ew-app .ew-card table td { padding: 10px 8px; }
  .ew-app .ew-card { overflow-x: auto; }

  /* nav CTA buttons: hide on mobile (hamburger handles nav) */
  .ew-app header .ew-btn { display: none; }

  /* hero grid, footer grid, service grid → single column */
  .ew-app footer > div:first-child { grid-template-columns: 1fr !important; }

  /* stat number: scale down */
  .ew-app .ew-section--ink [style*="font-size: 56px"] { font-size: 40px !important; }

  /* site controls: smaller on mobile */
  .site-controls { bottom: 12px; left: 12px; }
  .site-ctrl-btn { height: 30px; font-size: 10px; padding: 0 10px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ew-app .ew-section { padding: 72px 40px; }
  .ew-app .ew-h-display { font-size: 64px; }
  .ew-app .ew-h1 { font-size: 44px; }
}