/* Beyond Bright Creative — component styles. Every colour, length and radius is a token from tokens.css. One stroke weight: var(--line), 1px oxblood. */

.bbc-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--surface); color: var(--ink); font-family: var(--font-sans); }
.bbc-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--surface); color: var(--ink); font-family: var(--font-sans); }

/* Focus ring: ring token, 2px solid, 2px gap of the surface */
.bbc-btn:focus-visible, .bbc-input:focus-visible, .bbc-nav a:focus-visible, .bbc-card--link:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}

/* Button: a pill with a 1px brown line */
.bbc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  min-height: calc(44px * var(--s)); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); box-sizing: border-box;
  border: var(--line) solid var(--border); cursor: pointer; text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.bbc-btn--primary { background: var(--primary); color: var(--on-primary); }
.bbc-btn--teal, .bbc-btn--green { background: var(--teal); color: var(--ink-inverse); }
.bbc-btn--pink { background: var(--accent); color: var(--on-accent); font-size: calc(19px * var(--s)); line-height: calc(24px * var(--s)); font-weight: 700; padding: var(--space-3) var(--space-6); }
.bbc-btn--outline { background: var(--surface); color: var(--ink); }
.bbc-btn--text { background: transparent; color: var(--ink-link); text-decoration: underline; text-underline-offset: calc(3px * var(--s)); padding-left: var(--space-2); padding-right: var(--space-2); }
.bbc-btn--primary:hover { background: var(--on-primary); color: var(--primary); }
.bbc-btn--teal:hover, .bbc-btn--green:hover { background: var(--ink-inverse); color: var(--teal); }
.bbc-btn--pink:hover { background: var(--on-accent); color: var(--accent); }
.bbc-btn--outline:hover { background: var(--ink); color: var(--ink-inverse); }
.bbc-btn--text:hover { background: var(--surface-tint); }
.bbc-btn:not(.bbc-btn--text):active { opacity: 0.85; }
.bbc-btn[disabled] { background: transparent; color: var(--ink); border: var(--line) dashed var(--border); cursor: not-allowed; }
.bbc-btn--sm { font-size: 12px; line-height: 16px; min-height: calc(36px * var(--s)); padding: var(--space-2) var(--space-4); }

/* Tag: a stamp or sticker */
.bbc-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-sans); font-size: calc(12px * var(--s)); line-height: calc(16px * var(--s)); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  border: var(--line) solid var(--border); color: var(--ink); background: var(--surface);
}
.bbc-tag--stamp { /* square like everything else; the shape prop is kept for older files */ }
.bbc-tag--pink { background: var(--accent); color: var(--on-accent); }
.bbc-tag--pale-pink { background: var(--pale-pink); color: var(--ink); }
.bbc-tag--purple { background: var(--purple); color: var(--ink-inverse); }
.bbc-tag--pistachio { background: var(--pistachio); color: var(--ink); }
.bbc-tag--teal, .bbc-tag--green { background: var(--teal); color: var(--ink-inverse); }
.bbc-tag--oxblood { background: var(--primary); color: var(--on-primary); }
.bbc-tag--lilac { background: var(--lilac); color: var(--ink); }
.bbc-tag--pink-wash { background: var(--pink-wash); color: var(--ink); }
.bbc-tag--success { background: var(--pistachio); color: var(--ink); }
.bbc-tag--danger { background: var(--surface); color: var(--ink); border-color: var(--danger); }
.bbc-tag--tilt { transform: rotate(-4deg); }

/* Awning band */
.bbc-stripe { height: var(--band-height); box-sizing: border-box; border: 0 solid var(--border); }
.bbc-stripe--edge-bottom { border-bottom-width: var(--line); }
.bbc-stripe--edge-top { border-top-width: var(--line); }
.bbc-stripe--edge-both { border-top-width: var(--line); border-bottom-width: var(--line); }
.bbc-stripe--cabana { background: repeating-linear-gradient(90deg, var(--stripe-a) 0 var(--stripe-width), var(--stripe-b) var(--stripe-width) calc(var(--stripe-width) * 2)); }
.bbc-stripe--pistachio { background: repeating-linear-gradient(90deg, var(--pistachio) 0 calc(34px * var(--s)), var(--teal) calc(34px * var(--s)) calc(68px * var(--s))); }
.bbc-stripe--loud { background: repeating-linear-gradient(90deg, var(--stripe-loud-a) 0 calc(34px * var(--s)), var(--stripe-loud-b) calc(34px * var(--s)) calc(68px * var(--s))); }
.bbc-stripe--thin { height: var(--space-5); }
.bbc-stripe--thin.bbc-stripe--cabana { background: repeating-linear-gradient(90deg, var(--stripe-a) 0 calc(34px * var(--s)), var(--stripe-b) calc(34px * var(--s)) calc(68px * var(--s))); }

/* Starburst badge: an SVG shape with a true 1px stroke, the word on top */
.bbc-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center; width: calc(110px * var(--s)); height: calc(110px * var(--s)); flex: none;
  font-family: var(--font-sans); font-weight: 600; font-size: calc(13px * var(--s)); line-height: calc(16px * var(--s)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pistachio); }
.bbc-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bbc-badge polygon { fill: var(--teal); stroke: var(--border); stroke-width: var(--line); vector-effect: non-scaling-stroke; }
.bbc-badge span { position: relative; padding: 0 var(--space-3); }
.bbc-badge--pink { color: var(--on-accent); }
.bbc-badge--pink polygon { fill: var(--accent); }
.bbc-badge--pistachio { color: var(--teal); }
.bbc-badge--pistachio polygon { fill: var(--pistachio); }
.bbc-badge--sm { width: calc(80px * var(--s)); height: calc(80px * var(--s)); font-size: calc(12px * var(--s)); letter-spacing: 0.1em; }
.bbc-badge--tilt { transform: rotate(10deg); }

/* Membership card */
.bbc-card {
  position: relative; width: calc(360px * var(--s)); max-width: 100%; box-sizing: border-box;
  background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans);
  border: var(--line) solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.bbc-card--pink-wash, .bbc-card--pink, .bbc-card--blush { background: var(--pink-wash); }
.bbc-card--link { display: block; text-decoration: none; color: inherit; }
.bbc-card--link:hover .bbc-card__title { color: var(--accent); }
.bbc-card > .bbc-stripe { border-bottom-width: var(--line); }
.bbc-card__body { padding: var(--space-5); }
.bbc-card__eyebrow { font-family: var(--font-script); font-size: calc(26px * var(--s)); line-height: 1.2; color: var(--accent); margin: 0 0 var(--space-1); }
.bbc-card--pink-wash .bbc-card__eyebrow, .bbc-card--pink .bbc-card__eyebrow { color: var(--teal); }
.bbc-card__title { font-family: var(--font-sans); font-size: calc(18px * var(--s)); line-height: 1.25; letter-spacing: 0.06em; font-weight: 600; color: var(--ink-heading); margin: 0 0 var(--space-3); text-transform: uppercase; }
.bbc-card__text { font-size: calc(16px * var(--s)); line-height: calc(24px * var(--s)); margin: 0; }
.bbc-card__meta { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--line) solid var(--border); font-size: calc(12px * var(--s)); line-height: calc(16px * var(--s)); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.bbc-card__stamp { position: absolute; top: calc(var(--space-5) + var(--space-5)); right: var(--space-5); transform: rotate(6deg); }

/* Input */
.bbc-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); color: var(--ink); width: calc(320px * var(--s)); max-width: 100%; }
.bbc-field__label { font-size: calc(12px * var(--s)); line-height: calc(16px * var(--s)); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.bbc-input {
  font-family: var(--font-sans); font-size: calc(16px * var(--s)); line-height: calc(24px * var(--s)); color: var(--ink);
  background: var(--surface-raised); border: var(--line) solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); width: 100%; box-sizing: border-box;
}
.bbc-input::placeholder { color: var(--ink-muted); font-style: italic; }
.bbc-field--error .bbc-input { border-color: var(--danger); }
.bbc-field__help { font-size: calc(14px * var(--s)); line-height: calc(20px * var(--s)); color: var(--ink-muted); font-style: italic; }
.bbc-field--error .bbc-field__help { color: var(--ink); font-style: normal; font-weight: 500; }

/* Notice */
.bbc-notice {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border: var(--line) solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-tint); color: var(--ink); font-family: var(--font-sans); font-size: calc(16px * var(--s)); line-height: calc(24px * var(--s)); font-weight: 500;
  max-width: calc(560px * var(--s)); box-sizing: border-box;
}
.bbc-notice p { margin: 0; }
.bbc-notice--info { background: var(--surface-tint); }
.bbc-notice--success { background: var(--pistachio); }
.bbc-notice--warning { background: var(--bubblegum); }
.bbc-notice--danger { background: var(--surface); border-color: var(--danger); }
.bbc-notice .bbc-tag { flex: none; background: var(--surface); }
.bbc-notice--warning .bbc-tag, .bbc-notice--danger .bbc-tag {
  background: var(--surface); color: var(--ink); border-color: var(--danger); }

/* Nav */
.bbc-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-5); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); border-bottom: var(--line) solid var(--border); }
.bbc-nav__brand { display: flex; align-items: center; height: calc(40px * var(--s)); }
.bbc-nav__brand img { height: calc(28px * var(--s)); width: auto; display: block; }
.bbc-nav__name { font-family: var(--font-script); font-size: calc(26px * var(--s)); color: var(--accent); }
.bbc-nav__links { display: flex; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.bbc-nav a { font-size: calc(16px * var(--s)); line-height: calc(20px * var(--s)); font-weight: 700; color: var(--ink); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: var(--line) solid transparent; }
.bbc-nav a:hover { text-decoration: underline; text-underline-offset: calc(3px * var(--s)); }
.bbc-nav a.is-active { background: var(--pistachio); color: var(--ink); border-color: var(--border); }

/* Callout: a tinted panel with a tilted pistachio tab straddling its top edge */
.bbc-callout { position: relative; margin-top: var(--space-5); box-sizing: border-box; max-width: calc(640px * var(--s));
  background: var(--surface-tint); color: var(--ink); font-family: var(--font-sans);
  border: var(--line) solid var(--border); border-radius: var(--radius-sm); }
.bbc-callout--pale-pink { background: var(--pale-pink); }
.bbc-callout--cream { background: var(--surface); }
.bbc-callout__tab { position: absolute; top: calc(-17px * var(--s)); left: calc(20px * var(--s)); display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(32px * var(--s)); padding: 0 calc(14px * var(--s)); box-sizing: border-box; background: var(--pistachio); color: var(--ink);
  border: var(--line) solid var(--border); border-radius: var(--radius-sm);
  font-size: calc(12px * var(--s)); line-height: calc(16px * var(--s)); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; transform: rotate(-3deg); }
.bbc-callout__body { padding: calc(36px * var(--s)) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.bbc-callout__title { margin: 0; font-size: calc(20px * var(--s)); line-height: 1.25; font-weight: 700; }
.bbc-callout__text { margin: 0; font-size: calc(16px * var(--s)); line-height: calc(24px * var(--s)); }