/* ============================================================
   Airbnb Design System — shared tokens & primitives
   Source of truth: /DESIGN.md (Airbnb-design-analysis, alpha)
   순백 캔버스 · Rausch(#ff385c) 단일 액센트 · 부드러운 라운드 ·
   단일 그림자 티어 · 절제된 타이포(Inter). 두 뷰가 공유.
   ============================================================ */

:root {
  /* ---- Brand & accent ---- */
  --ab-primary: #ff385c;          /* Rausch */
  --ab-primary-active: #e00b41;
  --ab-primary-disabled: #ffd1da;
  --ab-error: #c13515;
  --ab-error-soft: #fff0ec;

  /* ---- Text ---- */
  --ab-ink: #222222;
  --ab-body: #3f3f3f;
  --ab-muted: #6a6a6a;
  --ab-muted-soft: #929292;
  --ab-on-primary: #ffffff;

  /* ---- Surface ---- */
  --ab-canvas: #ffffff;
  --ab-surface-soft: #f7f7f7;
  --ab-surface-strong: #f2f2f2;

  /* ---- Hairlines & borders ---- */
  --ab-hairline: #dddddd;
  --ab-hairline-soft: #ebebeb;
  --ab-border-strong: #c1c1c1;

  /* ---- Softened semantic status tones (Airbnb pill 미감) ---- */
  --ab-amber-bg: #fdf0d5;   --ab-amber-fg: #b26a00;   /* In Transit */
  --ab-green-bg: #e8f5ec;   --ab-green-fg: #2b7a4b;   /* Delivered */
  --ab-blue-bg: #eef4fb;    --ab-blue-fg: #3a6ea5;    /* Shipped */
  --ab-neutral-bg: #f2f2f2; --ab-neutral-fg: #6a6a6a; /* Pending */
  --ab-orange-bg: #fdefe4;  --ab-orange-fg: #b85c1e;  /* Delayed */
  --ab-red-bg: #fdecec;     --ab-red-fg: #c13515;     /* Alert */

  /* ---- Radius ---- */
  --ab-r-xs: 4px;
  --ab-r-sm: 8px;
  --ab-r-md: 14px;
  --ab-r-lg: 20px;
  --ab-r-xl: 32px;
  --ab-r-full: 9999px;

  /* ---- Spacing (4px base) ---- */
  --ab-sp-xxs: 2px;
  --ab-sp-xs: 4px;
  --ab-sp-sm: 8px;
  --ab-sp-md: 12px;
  --ab-sp-base: 16px;
  --ab-sp-lg: 24px;
  --ab-sp-xl: 32px;
  --ab-sp-xxl: 48px;
  --ab-sp-section: 64px;

  /* ---- Elevation (single tier) ---- */
  --ab-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px,
               rgba(0, 0, 0, 0.04) 0 2px 6px 0,
               rgba(0, 0, 0, 0.10) 0 4px 8px 0;

  /* ---- Type ---- */
  --ab-font: 'Inter', 'Airbnb Cereal VF', Circular, -apple-system,
             system-ui, Roboto, 'Helvetica Neue', sans-serif;
}

/* Inter carries the whole scale; body sets the default family. */
body {
  font-family: var(--ab-font);
  color: var(--ab-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Primitives (opt-in helpers; views may also use tokens directly) ---- */

.ab-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14px 24px;
  border: none;
  border-radius: var(--ab-r-sm);
  background: var(--ab-primary);
  color: var(--ab-on-primary);
  font-family: var(--ab-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ab-btn-primary:hover { background: var(--ab-primary-active); }
.ab-btn-primary:active { background: var(--ab-primary-active); }
.ab-btn-primary:disabled {
  background: var(--ab-primary-disabled);
  cursor: not-allowed;
}

.ab-card {
  background: var(--ab-canvas);
  border: 1px solid var(--ab-hairline);
  border-radius: var(--ab-r-md);
  box-shadow: var(--ab-shadow);
}

.ab-pill {
  border-radius: var(--ab-r-full);
}

/* Text input focus: 2px ink border, no glow/ring. */
.ab-input {
  width: 100%;
  height: 56px;
  padding: 14px 12px;
  border: 1px solid var(--ab-hairline);
  border-radius: var(--ab-r-sm);
  background: var(--ab-canvas);
  color: var(--ab-ink);
  font-family: var(--ab-font);
  font-size: 16px;
}
.ab-input:focus {
  outline: none;
  border: 2px solid var(--ab-ink);
  padding: 13px 11px; /* compensate for +1px border to avoid reflow */
}