/* bulenyabule component styles — consumed by the React primitives in components/ */

/* ---------- Button ---------- */
.bb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);border:2px solid transparent;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--duration-fast) var(--ease-out-brand),background-color var(--duration-fast) var(--ease-out-brand),color var(--duration-fast) var(--ease-out-brand),border-color var(--duration-fast) var(--ease-out-brand)}
.bb-btn:hover{transform:translateY(var(--hover-lift));text-decoration:none}
.bb-btn:active{transform:scale(var(--press-scale))}
.bb-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.bb-btn[disabled],.bb-btn[aria-disabled="true"]{opacity:.38;cursor:not-allowed;transform:none}
.bb-btn--sm{height:36px;padding:0 var(--space-4);font-size:var(--text-small)}
.bb-btn--md{height:46px;padding:0 var(--space-6);font-size:var(--text-body)}
.bb-btn--lg{height:56px;padding:0 var(--space-8);font-size:var(--text-subhead)}
.bb-btn--lime{background:var(--bb-lime);color:var(--text-on-lime)}
.bb-btn--lime:hover{background:#D4FF3D;color:var(--text-on-lime)}
.bb-btn--blue{background:var(--bb-blue);color:var(--text-on-blue)}
.bb-btn--blue:hover{background:#4F7BFF;color:var(--text-on-blue)}
.bb-btn--coral{background:var(--bb-coral);color:var(--text-on-coral)}
.bb-btn--coral:hover{background:#FF7357;color:var(--text-on-coral)}
.bb-btn--light{background:var(--bb-off-white);color:var(--text-on-light)}
.bb-btn--light:hover{background:var(--bb-white);color:var(--text-on-light)}
.bb-btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.bb-btn--outline:hover{background:var(--bb-off-white);color:var(--text-on-light)}
.bb-btn--ghost{background:transparent;color:var(--text-primary);border-color:transparent}
.bb-btn--ghost:hover{background:rgba(242,242,242,.1);color:var(--text-primary)}
.bb-btn--shout{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;letter-spacing:var(--tracking-normal)}
.bb-btn--block{width:100%}

/* ---------- IconButton ---------- */
.bb-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:var(--radius-pill);cursor:pointer;background:transparent;color:var(--text-primary);transition:transform var(--duration-fast) var(--ease-out-brand),background-color var(--duration-fast) var(--ease-out-brand),color var(--duration-fast) var(--ease-out-brand)}
.bb-iconbtn:hover{transform:translateY(var(--hover-lift))}
.bb-iconbtn:active{transform:scale(var(--press-scale))}
.bb-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.bb-iconbtn--sm{width:36px;height:36px}
.bb-iconbtn--md{width:46px;height:46px}
.bb-iconbtn--lg{width:56px;height:56px}
.bb-iconbtn--solid{background:var(--bb-lime);color:var(--text-on-lime)}
.bb-iconbtn--solid:hover{background:#D4FF3D}
.bb-iconbtn--outline{border-color:var(--border-strong)}
.bb-iconbtn--outline:hover{background:var(--bb-off-white);color:var(--text-on-light)}
.bb-iconbtn--ghost:hover{background:rgba(242,242,242,.1)}

/* ---------- Tag / Badge ---------- */
.bb-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);background:transparent}
.bb-tag--lime{border-color:var(--bb-lime);color:var(--bb-lime)}
.bb-tag--blue{border-color:var(--bb-blue);color:#8AA6FF}
.bb-tag--coral{border-color:var(--bb-coral);color:var(--bb-coral)}
.bb-tag--filled{border-color:transparent;background:var(--bb-off-white);color:var(--text-on-light)}
.bb-tag--hand{font-family:var(--font-hand);font-size:var(--text-subhead);font-weight:var(--weight-bold);height:30px}
.bb-badge{display:inline-flex;align-items:center;padding:3px var(--space-2);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;border-radius:var(--radius-sm)}
.bb-badge--lime{background:var(--bb-lime);color:var(--text-on-lime)}
.bb-badge--coral{background:var(--bb-coral);color:var(--text-on-coral)}
.bb-badge--blue{background:var(--bb-blue);color:var(--text-on-blue)}
.bb-badge--light{background:var(--bb-off-white);color:var(--text-on-light)}
.bb-badge--dark{background:var(--bb-black);color:var(--bb-off-white)}

/* ---------- Card ---------- */
.bb-card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);padding:var(--space-6);color:var(--text-primary);transition:transform var(--duration-base) var(--ease-out-brand),border-color var(--duration-base) var(--ease-out-brand)}
.bb-card--flat{background:transparent}
.bb-card--light{background:var(--surface-inverse);color:var(--text-on-light);border-color:var(--border-on-light)}
.bb-card--lime{background:var(--bb-lime);color:var(--text-on-lime);border-color:transparent}
.bb-card--blue{background:var(--bb-blue);color:var(--text-on-blue);border-color:transparent}
.bb-card--coral{background:var(--bb-coral);color:var(--text-on-coral);border-color:transparent}
.bb-card--interactive{cursor:pointer}
.bb-card--interactive:hover{transform:translateY(-3px);border-color:var(--bb-lime)}

/* ---------- Highlight ---------- */
.bb-hl{padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bb-hl--lime{background:var(--bb-lime);color:var(--text-on-lime)}
.bb-hl--coral{background:var(--bb-coral);color:var(--text-on-coral)}
.bb-hl--blue{background:var(--bb-blue);color:var(--text-on-blue)}
.bb-hl--dark{background:var(--bb-black);color:var(--bb-off-white)}
.bb-hl--ink-lime{background:none;color:var(--bb-lime);padding:0}
.bb-hl--ink-coral{background:none;color:var(--bb-coral);padding:0}
.bb-hl--underline{background:none;padding:0;box-shadow:inset 0 -.16em 0 var(--underline-marker)}
.bb-hl--underline-coral{background:none;padding:0;box-shadow:inset 0 -.16em 0 var(--bb-coral)}

/* ---------- Sticker / Doodle ---------- */
.bb-sticker{display:inline-block;vertical-align:middle}
.bb-sticker img,.bb-doodle img{display:block;width:100%;height:auto}
.bb-doodle{display:inline-block;vertical-align:middle;pointer-events:none}

/* ---------- Logo ---------- */
.bb-logo{display:inline-flex;align-items:center;gap:var(--space-3)}
.bb-logo img{display:block;height:100%;width:auto}
.bb-logo__lockup{display:flex;flex-direction:column;line-height:1}
.bb-logo__name{font-family:var(--font-display);font-weight:var(--weight-black);letter-spacing:var(--tracking-display);color:var(--text-primary)}
.bb-logo__tag{font-family:var(--font-body);font-weight:var(--weight-semibold);color:var(--bb-lime);letter-spacing:var(--tracking-tight)}

/* ---------- Forms ---------- */
.bb-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-body)}
.bb-field__label{font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-bold);color:var(--bb-lime)}
.bb-field__hint{font-size:var(--text-caption);color:var(--text-muted)}
.bb-field__hint--error{color:var(--bb-coral)}
.bb-input{height:50px;padding:0 var(--space-4);background:var(--surface-raised);border:1.5px solid var(--border-hairline);border-radius:var(--radius-pill);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);transition:border-color var(--duration-fast) var(--ease-out-brand)}
.bb-input::placeholder{color:var(--text-muted)}
.bb-input:hover{border-color:rgba(242,242,242,.34)}
.bb-input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.bb-input--error{border-color:var(--bb-coral)}
.bb-input--textarea{height:auto;min-height:120px;padding:var(--space-4);border-radius:var(--radius-md);resize:vertical}
.bb-select{appearance:none;background-image:none;padding-right:var(--space-10);cursor:pointer}
.bb-select-wrap{position:relative;display:flex}
.bb-select-wrap svg{position:absolute;right:18px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-secondary)}
.bb-check{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-family:var(--font-body);font-size:var(--text-small);color:var(--text-primary)}
.bb-check__box{width:22px;height:22px;flex:none;border:2px solid var(--border-strong);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--duration-fast) var(--ease-out-brand),border-color var(--duration-fast) var(--ease-out-brand)}
.bb-check input{position:absolute;opacity:0;width:0;height:0}
.bb-check--checked .bb-check__box{background:var(--bb-lime);border-color:var(--bb-lime);color:var(--text-on-lime)}
.bb-check--radio .bb-check__box{border-radius:var(--radius-pill)}
.bb-check input:focus-visible + .bb-check__box{box-shadow:var(--focus-ring)}
.bb-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-family:var(--font-body);font-size:var(--text-small);color:var(--text-primary)}
.bb-switch__track{width:52px;height:30px;border-radius:var(--radius-pill);background:var(--bb-grey-700);border:1.5px solid var(--border-hairline);padding:3px;display:flex;transition:background-color var(--duration-base) var(--ease-out-brand)}
.bb-switch__thumb{width:22px;height:22px;border-radius:var(--radius-pill);background:var(--bb-off-white);transition:transform var(--duration-base) var(--ease-pop)}
.bb-switch--on .bb-switch__track{background:var(--bb-lime);border-color:var(--bb-lime)}
.bb-switch--on .bb-switch__thumb{transform:translateX(22px);background:var(--bb-black)}

/* ---------- Tabs ---------- */
.bb-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap}
.bb-tab{height:38px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:1.5px solid var(--border-hairline);background:transparent;color:var(--text-secondary);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-small);cursor:pointer;transition:all var(--duration-fast) var(--ease-out-brand)}
.bb-tab:hover{color:var(--text-primary);border-color:rgba(242,242,242,.4)}
.bb-tab--active{background:var(--bb-off-white);border-color:var(--bb-off-white);color:var(--text-on-light)}

/* ---------- Feedback ---------- */
.bb-toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);background:var(--bb-off-white);color:var(--text-on-light);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-small);box-shadow:var(--shadow-card)}
.bb-toast--dark{background:var(--bb-charcoal);color:var(--text-primary);border:1px solid var(--border-hairline)}
.bb-toast--lime{background:var(--bb-lime);color:var(--text-on-lime)}
.bb-toast--coral{background:var(--bb-coral);color:var(--text-on-coral)}
.bb-dialog-scrim{position:absolute;inset:0;z-index:40;background:var(--surface-overlay);backdrop-filter:var(--blur-overlay);display:flex;align-items:center;justify-content:center;padding:var(--space-6);overflow:auto;overscroll-behavior:contain}
.bb-dialog-scrim--fixed{position:fixed}
.bb-dialog{width:100%;max-width:460px;flex:none;max-height:calc(100% - var(--space-4));overflow:auto;background:var(--surface-raised);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);padding:var(--space-8);color:var(--text-primary);box-shadow:var(--shadow-overlay)}
.bb-dialog__title{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-title);letter-spacing:var(--tracking-display);line-height:var(--leading-snug);margin:0 0 var(--space-3)}
.bb-dialog__body{font-size:var(--text-small);color:var(--text-secondary);line-height:var(--leading-normal);margin:0 0 var(--space-6)}
.bb-dialog__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.bb-tooltip{position:relative;display:inline-flex}
.bb-tooltip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--bb-off-white);color:var(--text-on-light);font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold);padding:6px var(--space-3);border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out-brand)}
.bb-tooltip:hover .bb-tooltip__bubble{opacity:1}

/* ---------- Content ---------- */
.bb-seclabel{font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--bb-lime)}
.bb-seclabel--light{color:var(--text-on-light)}
.bb-quote{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-display-3);line-height:var(--leading-snug);letter-spacing:var(--tracking-display);color:var(--text-primary);margin:0}
.bb-quote__by{display:block;margin-top:var(--space-4);font-family:var(--font-hand);font-weight:var(--weight-semibold);font-size:var(--text-heading);color:var(--bb-lime);letter-spacing:0}
.bb-post{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/5;padding:var(--space-6);border-radius:var(--radius-post);overflow:hidden;font-family:var(--font-display)}
.bb-post--dark{background:var(--bb-black);color:var(--bb-off-white);box-shadow:inset 0 0 0 1px var(--border-hairline)}
.bb-post--light{background:var(--bb-off-white);color:var(--text-on-light)}
.bb-post--blue{background:var(--bb-blue);color:var(--bb-white)}
.bb-post--coral{background:var(--bb-coral);color:var(--bb-black)}
.bb-post__mark{position:absolute;top:var(--space-5);right:var(--space-5);height:26px}
.bb-post__mark img{display:block;height:100%;width:auto}
.bb-post__hook{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;line-height:var(--leading-tight);letter-spacing:var(--tracking-display);margin:0;padding-right:44px;font-size:clamp(15px,7.2cqw,44px);text-wrap:pretty;overflow-wrap:anywhere}
.bb-post__foot{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-small);text-transform:none;letter-spacing:0;opacity:.9;margin:0}