/* ════════════════════════════════════════════════════════════════
   Bamyoo Partner-Programm — shared marketing CSS
   Layers on top of /colors_and_type.css.
   Used by landing page, flyer, brochure, email, social, onboarding.
   ════════════════════════════════════════════════════════════════ */

@import url("/partner/colors_and_type.css");

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }
::selection { background: var(--champagne); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── Eyebrow ──────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--champagne);
  margin: 0;
}
.eyebrow--mute { color: var(--bone-low); }
.eyebrow--paper { color: var(--champagne-deep); }

/* ─── Hairlines ────────────────────────────────────────── */
.rule64 { display: block; width: 64px; height: 1px; background: var(--champagne); border: 0; margin: 0; }
.rule40 { display: block; width: 40px; height: 1px; background: var(--champagne); border: 0; margin: 0; }
.rule { display: block; width: 100%; height: 1px; background: var(--hairline); border: 0; margin: 0; }
.rule-soft {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(203,165,109,0.4) 50%, transparent 100%);
}

/* ─── Headlines ────────────────────────────────────────── */
.h-display, .h-h1, .h-h2, .h-h3, .h-h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.h-display { font-size: 64px; line-height: 1.05; letter-spacing: -0.02em; }
.h-h1      { font-size: 44px; line-height: 1.1; }
.h-h2      { font-size: 32px; line-height: 1.15; }
.h-h3      { font-size: 22px; line-height: 1.25; }
.h-h4      { font-size: 19px; line-height: 1.3; }

.h-display em, .h-h1 em, .h-h2 em, .h-h3 em, .h-h4 em {
  font-style: italic;
  font-weight: 300;
  color: var(--champagne);
}

/* Light surface headlines */
.h-paper { color: var(--ink-on-paper); }
.h-paper em { color: var(--champagne-deep); }

/* ─── Body ─────────────────────────────────────────────── */
.lead    { margin: 0; font-family: var(--font-sans); font-weight: 300; font-size: 18px; line-height: 1.65; color: var(--bone-mute); }
.body    { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--bone); }
.small   { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--bone-mute); }
.caption { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1.45; color: var(--bone-low); }
.mono    { font-family: var(--font-mono); font-size: 12px; color: var(--bone-low); letter-spacing: 0.02em; }

/* Light surface variants */
.body--paper { color: var(--ink-on-paper); }
.lead--paper { color: var(--ink-on-paper-soft); }
.small--paper { color: var(--ink-on-paper-soft); }
.caption--paper { color: var(--ink-on-paper-soft); }

/* ─── Button ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 450ms cubic-bezier(0.22,0.61,0.36,1);
  white-space: nowrap;
}
.btn--primary { background: transparent; border-color: var(--champagne); color: var(--champagne); }
.btn--primary:hover { background: var(--champagne); color: var(--ink); }
.btn--solid { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.btn--solid:hover { background: var(--champagne-deep); border-color: var(--champagne-deep); }
.btn--ghost { background: transparent; border-color: var(--hairline-strong); color: var(--bone); }
.btn--ghost:hover { border-color: var(--champagne); color: var(--champagne); }
.btn--sm { padding: 10px 18px; font-size: 11px; }
.btn--lg { padding: 18px 32px; font-size: 14px; }
.btn .arr { transition: transform 450ms cubic-bezier(0.22,0.61,0.36,1); }
.btn:hover .arr { transform: translateX(4px); }

/* Light surface button variants */
.btn--paper-primary { border-color: var(--champagne-deep); color: var(--champagne-deep); }
.btn--paper-primary:hover { background: var(--champagne-deep); color: var(--paper); }
.btn--paper-solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--paper-solid:hover { background: var(--ink-warm); border-color: var(--ink-warm); }

/* ─── Card ─────────────────────────────────────────────── */
.kard {
  background: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 32px;
}
.kard--lifted { background: var(--ink-lifted); border-color: var(--hairline-strong); }
.kard--paper  { background: var(--paper); color: var(--ink-on-paper); border-color: var(--champagne-deep); }
.kard--lg { padding: 48px; }
.kard--sm { padding: 24px; }

/* ─── Stacks / utilities ───────────────────────────────── */
.stack-2  { display: flex; flex-direction: column; gap: 8px; }
.stack-4  { display: flex; flex-direction: column; gap: 16px; }
.stack-6  { display: flex; flex-direction: column; gap: 24px; }
.stack-8  { display: flex; flex-direction: column; gap: 32px; }
.stack-12 { display: flex; flex-direction: column; gap: 48px; }
.row { display: flex; align-items: center; }
.row--gap-4 { gap: 16px; }
.row--gap-6 { gap: 24px; }
.row--gap-8 { gap: 32px; }
.row--wrap { flex-wrap: wrap; }

/* ─── Inputs ───────────────────────────────────────────── */
.fld { width: 100%; }
.fld__lbl {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--bone-low);
}
.fld__input {
  width: 100%;
  padding: 12px 16px;
  background: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 16px;
  outline: none;
  transition: border-color 450ms cubic-bezier(0.22,0.61,0.36,1);
}
.fld__input::placeholder { color: var(--bone-low); }
.fld__input:focus { border-color: var(--champagne); }
.fld__input--textarea { resize: vertical; min-height: 120px; line-height: 1.5; }