/* Bandlingo design tokens — single source of truth */
:root {
  /* Color */
  --bl-bg:        #FAF7F2;   /* warm off-white background */
  --bl-bg-elev:   #FFFFFF;   /* card / sheet surface */
  --bl-ink:       #1A1714;   /* near-black text */
  --bl-ink-2:     #4A4540;   /* secondary heading */
  --bl-muted:     #8A857F;   /* secondary text */
  --bl-muted-2:   #B6B0A6;   /* placeholder / tertiary */
  --bl-hairline:  #ECE6DC;   /* hairline divider */
  --bl-hairline-2:#D9D2C5;   /* slightly stronger border */
  --bl-accent:    #E4572E;   /* terracotta — primary */
  --bl-accent-press: #C8451F; /* pressed state */
  --bl-accent-tint:  #FBEAE2; /* very soft terracotta wash */

  /* Type */
  --bl-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bl-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (mobile-portrait) */
  --bl-display:   34px;  /* hero / onboarding headline */
  --bl-title-lg:  28px;  /* screen title */
  --bl-title:     22px;  /* section title */
  --bl-body-lg:   17px;  /* primary body */
  --bl-body:      15px;  /* default body */
  --bl-caption:   13px;  /* caption / label */
  --bl-micro:     11px;  /* micro / uppercase eyebrow */

  /* Weights */
  --bl-w-regular: 400;
  --bl-w-medium:  500;
  --bl-w-semi:    600;
  --bl-w-bold:    700;

  /* Spacing (4px base) */
  --bl-s-1:  4px;
  --bl-s-2:  8px;
  --bl-s-3:  12px;
  --bl-s-4:  16px;
  --bl-s-5:  20px;
  --bl-s-6:  24px;
  --bl-s-7:  32px;
  --bl-s-8:  40px;
  --bl-s-9:  56px;
  --bl-s-10: 72px;

  /* Radii */
  --bl-r-sm:   8px;
  --bl-r-md:  12px;
  --bl-r-lg:  16px;
  --bl-r-xl:  20px;
  --bl-r-pill: 999px;

  /* Elevation — used sparingly */
  --bl-shadow-1: 0 1px 2px rgba(26, 23, 20, 0.04), 0 4px 16px rgba(26, 23, 20, 0.04);
  --bl-shadow-cta: 0 8px 24px rgba(228, 87, 46, 0.20);

  /* Layout */
  --bl-screen-w: 390px;       /* iPhone 14/15 portrait */
  --bl-screen-pad: 24px;      /* horizontal screen padding */
  --bl-cta-bottom: 32px;      /* CTA inset from bottom (above home indicator) */
  --bl-tap: 52px;             /* min comfortable tap height */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--bl-font);
  color: var(--bl-ink);
  background: var(--bl-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

/* ---- Reusable component classes ---- */

/* Primary CTA — full-width terracotta pill */
.bl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--bl-tap);
  padding: 0 var(--bl-s-6);
  border: 0;
  border-radius: var(--bl-r-pill);
  background: var(--bl-accent);
  color: #fff;
  font: var(--bl-w-semi) var(--bl-body-lg)/1 var(--bl-font);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
  box-shadow: var(--bl-shadow-cta);
}
.bl-cta:active { background: var(--bl-accent-press); transform: translateY(1px); }
.bl-cta[disabled] { background: var(--bl-hairline-2); color: #fff; box-shadow: none; cursor: not-allowed; }

/* Secondary — ghost pill */
.bl-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--bl-tap); padding: 0 var(--bl-s-6);
  border: 1px solid var(--bl-hairline-2);
  border-radius: var(--bl-r-pill);
  background: transparent; color: var(--bl-ink);
  font: var(--bl-w-medium) var(--bl-body-lg)/1 var(--bl-font);
  cursor: pointer;
}

/* Tertiary text link */
.bl-link {
  background: none; border: 0; padding: 0;
  color: var(--bl-accent);
  font: var(--bl-w-medium) var(--bl-body)/1.2 var(--bl-font);
  cursor: pointer;
}

/* Hairline divider */
.bl-hairline { height: 1px; background: var(--bl-hairline); border: 0; margin: 0; }

/* Card */
.bl-card {
  background: var(--bl-bg-elev);
  border: 1px solid var(--bl-hairline);
  border-radius: var(--bl-r-lg);
  padding: var(--bl-s-5);
}

/* Text input */
.bl-field {
  width: 100%;
  min-height: var(--bl-tap);
  padding: 0 var(--bl-s-5);
  background: var(--bl-bg-elev);
  border: 1px solid var(--bl-hairline-2);
  border-radius: var(--bl-r-md);
  font: var(--bl-w-regular) var(--bl-body-lg)/1 var(--bl-font);
  color: var(--bl-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bl-field::placeholder { color: var(--bl-muted-2); }
.bl-field:focus { border-color: var(--bl-ink); }

/* Eyebrow */
.bl-eyebrow {
  font: var(--bl-w-semi) var(--bl-micro)/1 var(--bl-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bl-muted);
}

/* 3-step onboarding progress */
.bl-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bl-s-2);
  width: 100%;
}
.bl-progress > span {
  height: 3px;
  border-radius: 2px;
  background: var(--bl-hairline);
}
.bl-progress > span[data-state="done"],
.bl-progress > span[data-state="active"] { background: var(--bl-accent); }
.bl-progress > span[data-state="active"] { opacity: 1; }
.bl-progress > span[data-state="done"]   { opacity: 1; }

/* Screen scaffold (mobile portrait) */
.bl-screen {
  width: var(--bl-screen-w);
  min-height: 844px;
  background: var(--bl-bg);
  padding: var(--bl-s-6) var(--bl-screen-pad) var(--bl-cta-bottom);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}