/* ============================================================
   Coffee Business Basics — site-wide styles
   Design tokens ported from the Claude Design system bundle,
   unchanged (see cafe-profit-calculator/styles.css for the same
   token set used by the calculator, so the whole domain reads as
   one product).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --cbb-charcoal:     #3C3C3C;
  --cbb-near-black:   #2C2C2C;
  --cbb-cream:        #F0EDE8;
  --cbb-coral:        #E8604A;
  --cbb-light-grey:   #D9D9D9;
  --cbb-charcoal-hi:  #474747;
  --cbb-charcoal-lo:  #333333;
  --cbb-cream-hi:     #F7F5F1;
  --cbb-cream-lo:     #E4E0D9;
  --cbb-stone:        #8A857D;
  --cbb-stone-dk:     #6B6760;
  --cbb-coral-press:  #D44E38;
  --cbb-coral-soft:   #F2A293;

  --accent:            var(--cbb-coral);
  --accent-press:      var(--cbb-coral-press);
  --accent-soft:       var(--cbb-coral-soft);
  --focus-ring:        var(--cbb-coral);

  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --text-lg:    1.25rem;
  --text-base:  1.0625rem;
  --text-sm:    0.9375rem;
  --text-xs:    0.8125rem;
  --eyebrow-size:    0.8125rem;
  --leading-tight:   1.04;
  --leading-snug:    1.22;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --tracking-display: -0.02em;
  --tracking-wide:    0.18em;

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;
  --border-width:       1px;
  --border-width-thick: 2px;

  --container-max:  1200px;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      220ms;

  /* dark is the site's default surface */
  --surface:           var(--cbb-charcoal);
  --surface-raised:    var(--cbb-charcoal-hi);
  --surface-sunken:    var(--cbb-near-black);
  --text-primary:      var(--cbb-cream);
  --text-secondary:    var(--cbb-light-grey);
  --text-muted:        var(--cbb-stone);
  --border-subtle:     rgba(240, 237, 232, 0.14);
  --border-strong:     rgba(240, 237, 232, 0.28);
  --on-accent:         var(--cbb-cream);
  color-scheme:        dark;
}

.cbb-light {
  --surface:           var(--cbb-cream);
  --surface-raised:    var(--cbb-cream-hi);
  --surface-sunken:    var(--cbb-cream-lo);
  --text-primary:      var(--cbb-near-black);
  --text-secondary:    var(--cbb-stone-dk);
  --text-muted:        var(--cbb-stone);
  --border-subtle:     rgba(44, 44, 44, 0.12);
  --border-strong:     rgba(44, 44, 44, 0.22);
  --on-accent:         var(--cbb-cream);
  color-scheme:        light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--cbb-charcoal);
  color: var(--cbb-cream);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); margin: 0; }
p { margin: 0; }
a { color: var(--accent); }
a:hover { color: var(--accent-press); }
img { max-width: 100%; }

:focus-visible { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.cbb-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.cbb-rule { width: 48px; height: 3px; background: var(--accent); border: 0; margin: 0; }

/* ---- Buttons ---- */
.cbb-btn {
  font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 0 28px; height: 56px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.cbb-btn:active { transform: translateY(1px); }
.cbb-btn--primary { background: var(--accent); color: var(--on-accent); }
.cbb-btn--primary:hover { background: var(--accent-press); color: var(--on-accent); }
.cbb-btn--sm { height: 38px; padding: 0 20px; font-size: 15px; }

/* ---- Header ---- */
.cbb-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(20px, 5vw, 40px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 20;
  background: rgba(60, 60, 60, 0.92); backdrop-filter: blur(8px);
}
.cbb-header--center { justify-content: center; position: static; backdrop-filter: none; background: transparent; }
.cbb-header--light { background: rgba(240, 237, 232, 0.92); border-bottom: 1px solid var(--cbb-cream-lo); }
.cbb-brand {
  font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.02em;
  color: var(--cbb-cream); text-decoration: none;
}
.cbb-light .cbb-brand { color: var(--cbb-near-black); }
.cbb-brand .dot { color: var(--cbb-coral); }
.cbb-brand:hover { color: var(--cbb-cream); }
.cbb-light .cbb-brand:hover { color: var(--cbb-near-black); }

.cbb-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }
.cbb-nav a { color: var(--cbb-light-grey); text-decoration: none; font-size: 15px; font-weight: 500; }
.cbb-nav a:hover { color: var(--cbb-cream); }
.cbb-light .cbb-nav a { color: var(--cbb-near-black); }
.cbb-light .cbb-nav a:hover { color: var(--cbb-coral); }

.cbb-menu-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--cbb-cream); cursor: pointer;
}
.cbb-light .cbb-menu-btn { color: var(--cbb-near-black); }
.cbb-menu-btn svg { display: block; }
.cbb-menu-btn .icon-close { display: none; }
.cbb-menu-btn[aria-expanded="true"] .icon-open { display: none; }
.cbb-menu-btn[aria-expanded="true"] .icon-close { display: block; }

.cbb-mobile-nav {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px clamp(20px, 5vw, 40px) 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(60, 60, 60, 0.97); backdrop-filter: blur(8px);
  position: sticky; top: 77px; z-index: 19;
}
.cbb-mobile-nav.is-open { display: flex; }
.cbb-mobile-nav a { color: var(--cbb-cream); text-decoration: none; font-size: 17px; font-weight: 500; padding: 12px 4px; }
.cbb-mobile-nav a.accent { color: var(--cbb-coral); }

@media (max-width: 719px) {
  .cbb-nav { display: none; }
  .cbb-menu-btn { display: flex; }
}

/* ---- Layout helpers ---- */
.cbb-section { max-width: var(--container-max); margin: 0 auto; padding: 48px clamp(20px, 5vw, 56px); }
.cbb-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.cbb-split--narrow-photo { grid-template-columns: minmax(0, 300px) 1fr; }
@media (max-width: 719px) {
  .cbb-split--narrow-photo { grid-template-columns: 1fr; }
  .cbb-split--narrow-photo .cbb-photo { max-width: 300px; }
}

.cbb-photo { position: relative; overflow: hidden; background: var(--cbb-near-black); border-radius: var(--radius-lg); }
.cbb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.cbb-image-slot {
  position: relative; background: var(--cbb-near-black); overflow: hidden; border-radius: var(--radius-lg);
  background-image: repeating-linear-gradient(135deg, rgba(240,237,232,0.05) 0 2px, transparent 2px 22px);
}
.cbb-image-slot::before {
  content: ''; position: absolute; left: 24px; top: 24px; width: 22px; height: 22px;
  border-top: var(--border-width-thick) solid var(--accent); border-left: var(--border-width-thick) solid var(--accent);
}
.cbb-image-slot::after {
  content: attr(data-label); position: absolute; left: 24px; bottom: 18px;
  font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--cbb-stone);
}

/* ---- Form ---- */
.cbb-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 520px; }
.cbb-form--center { justify-content: center; }
.cbb-input {
  flex: 1 1 240px; height: 54px; padding: 0 22px; font-family: var(--font-body); font-size: 16px;
  color: var(--cbb-cream); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
}
.cbb-input::placeholder { color: var(--cbb-stone); }

.cbb-confirm {
  display: flex; align-items: flex-start; gap: 16px; padding: 24px;
  background: var(--cbb-charcoal-hi); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  max-width: 560px;
}
.cbb-confirm__check {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--cbb-coral);
  color: var(--cbb-cream); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.cbb-confirm h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; color: var(--cbb-cream); margin: 0 0 6px; }
.cbb-confirm p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cbb-light-grey); }

[data-form-step="done"] { display: none; }
.is-submitted [data-form-step="form"] { display: none; }
.is-submitted [data-form-step="done"] { display: flex; }

/* ---- Footer ---- */
.cbb-footer {
  background: var(--cbb-near-black); color: var(--cbb-cream); font-family: var(--font-body);
  padding: 56px clamp(20px, 5vw, 32px) 40px;
}
.cbb-footer__inner { max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.cbb-footer__top { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: baseline; justify-content: space-between; }
.cbb-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.cbb-footer__nav a { color: var(--cbb-light-grey); text-decoration: none; font-size: 15px; }
.cbb-footer__nav a:hover { color: var(--cbb-coral); }
.cbb-footer__rule { height: 1px; background: var(--border-subtle); }
.cbb-footer__copy { margin: 0; font-size: 13px; color: var(--cbb-stone); }

/* The footer is always dark regardless of the page theme it sits in
   (see Privacy, a .cbb-light page) — pin the brand mark's color so the
   .cbb-light ancestor override above can't make it invisible. */
.cbb-footer .cbb-brand,
.cbb-footer .cbb-brand:hover { color: var(--cbb-cream); }