/* BOOXit — the .bxt-* class set.
   Plain CSS classes: put them on whatever element your stack renders.
   No JS. All colors come from tokens/colors.css.
   Everything lives in @layer booxit, so unlayered app CSS always wins. */
@layer booxit{

/* ============ Buttons ============ */
.bxt-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h-md);padding:0 var(--control-px-md);border:var(--border-w) solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);line-height:1;letter-spacing:var(--ls-body);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.bxt-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.bxt-btn:disabled,.bxt-btn[aria-disabled="true"],.bxt-btn.is-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}
.bxt-btn:hover{text-decoration:none}

.bxt-btn--primary{background:var(--color-primary);color:var(--color-on-primary)}
.bxt-btn--primary:hover{background:var(--color-primary-hover);color:var(--color-on-primary)}
.bxt-btn--primary:active{background:var(--color-primary-active)}

.bxt-btn--accent{background:var(--color-accent);color:var(--color-on-accent)}
.bxt-btn--accent:hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
.bxt-btn--accent:active{background:var(--color-accent-active)}
.bxt-btn--accent:focus-visible{box-shadow:var(--shadow-focus-danger)}

.bxt-btn--outline{background:var(--surface-card);border-color:var(--border-strong);color:var(--text-primary)}
.bxt-btn--outline:hover{background:var(--surface-subtle);border-color:var(--color-primary);color:var(--color-primary)}
.bxt-btn--outline:active{background:var(--color-primary-subtle)}

.bxt-btn--subtle{background:var(--color-primary-subtle);color:var(--color-primary-active)}
.bxt-btn--subtle:hover{background:var(--blue-100);color:var(--color-primary-active)}

.bxt-btn--ghost{background:transparent;color:var(--text-secondary)}
.bxt-btn--ghost:hover{background:var(--surface-subtle);color:var(--text-primary)}

.bxt-btn--danger{background:var(--color-danger);color:var(--text-inverse)}
.bxt-btn--danger:hover{background:var(--red-600);color:var(--text-inverse)}
.bxt-btn--danger:focus-visible{box-shadow:var(--shadow-focus-danger)}

.bxt-btn--sm{height:var(--control-h-sm);padding:0 var(--control-px-sm);font-size:var(--fs-caption)}
.bxt-btn--lg{height:var(--control-h-lg);padding:0 var(--control-px-lg);font-size:var(--fs-body)}
.bxt-btn--block{display:flex;width:100%}
.bxt-btn--icon{width:var(--control-h-md);padding:0}
.bxt-btn--icon.bxt-btn--sm{width:var(--control-h-sm)}
.bxt-btn--icon.bxt-btn--lg{width:var(--control-h-lg)}
.bxt-btn--pill{border-radius:var(--radius-pill)}
.bxt-btn--caps{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-caps)}

/* Button group — segmented, shared borders */
.bxt-btn-group{display:inline-flex}
.bxt-btn-group>.bxt-btn{border-radius:0;margin-left:calc(var(--border-w) * -1)}
.bxt-btn-group>.bxt-btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md);margin-left:0}
.bxt-btn-group>.bxt-btn:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}
.bxt-btn-group>.bxt-btn:focus-visible{position:relative;z-index:1}

/* ============ Form controls ============ */
.bxt-field{display:flex;flex-direction:column;gap:var(--space-2)}
.bxt-label{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}
.bxt-label--req::after{content:"*";color:var(--color-accent);margin-left:2px}
.bxt-help{font-size:var(--fs-caption);color:var(--text-muted)}
.bxt-error{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--color-danger)}

.bxt-input,.bxt-select,.bxt-textarea{width:100%;height:var(--control-h-md);padding:0 var(--control-px-sm);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);font-family:var(--font-sans);font-size:var(--fs-body-sm);color:var(--text-primary);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.bxt-input::placeholder,.bxt-textarea::placeholder{color:var(--text-muted)}
.bxt-input:hover,.bxt-select:hover,.bxt-textarea:hover{border-color:var(--border-strong)}
.bxt-input:focus,.bxt-select:focus,.bxt-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}
.bxt-input:disabled,.bxt-select:disabled,.bxt-textarea:disabled{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
.bxt-input.is-invalid,.bxt-select.is-invalid,.bxt-textarea.is-invalid{border-color:var(--color-danger)}
.bxt-input.is-invalid:focus,.bxt-textarea.is-invalid:focus{box-shadow:var(--shadow-focus-danger)}
.bxt-textarea{height:auto;min-height:96px;padding:var(--space-3) var(--control-px-sm);line-height:var(--lh-body);resize:vertical}
.bxt-select{padding-right:var(--space-8);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gray-500) 50%),linear-gradient(135deg,var(--gray-500) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 1px),calc(100% - 13px) calc(50% - 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.bxt-input--sm,.bxt-select--sm{height:var(--control-h-sm);font-size:var(--fs-caption)}
.bxt-input--lg,.bxt-select--lg{height:var(--control-h-lg);font-size:var(--fs-body)}
.bxt-input--mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Checkbox / radio / switch — native controls, brand-tinted */
.bxt-check{display:inline-flex;align-items:flex-start;gap:var(--space-2);font-size:var(--fs-body-sm);color:var(--text-primary);cursor:pointer}
.bxt-check input[type="checkbox"],.bxt-check input[type="radio"]{width:18px;height:18px;margin:0;flex:none;accent-color:var(--color-primary);cursor:pointer}
.bxt-check input:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* Input with leading/trailing adornment */
.bxt-input-group{display:flex;align-items:stretch}
.bxt-input-group>.bxt-input{border-radius:0}
.bxt-input-group>:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}
.bxt-input-group>:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}
.bxt-input-group>*+*{margin-left:calc(var(--border-w) * -1)}
.bxt-input-group>.bxt-input:focus{position:relative;z-index:1}
.bxt-addon{display:inline-flex;align-items:center;padding:0 var(--control-px-sm);border:var(--border-w) solid var(--border-default);background:var(--surface-subtle);font-size:var(--fs-body-sm);color:var(--text-secondary);white-space:nowrap}

/* ============ Card ============ */
.bxt-card{display:flex;flex-direction:column;background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.bxt-card--raised{box-shadow:var(--shadow-md);border-color:transparent}
.bxt-card--flat{box-shadow:none;background:var(--surface-subtle);border-color:var(--border-default)}
.bxt-card--interactive{cursor:pointer;transition:box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.bxt-card--interactive:hover{box-shadow:var(--shadow-md);border-color:var(--border-default);transform:translateY(-1px)}
.bxt-card--accent{border-top:var(--border-w-strong) solid var(--color-primary)}
.bxt-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);border-bottom:var(--border-w) solid var(--border-subtle)}
.bxt-card__title{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--text-primary);margin:0}
.bxt-card__body{padding:var(--space-6);color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:var(--lh-body)}
.bxt-card__footer{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:var(--border-w) solid var(--border-subtle);background:var(--surface-subtle);border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* ============ Badge / status pill ============ */
.bxt-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-display);font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;line-height:1.4;background:var(--surface-sunken);color:var(--text-secondary);white-space:nowrap}
.bxt-badge--primary{background:var(--color-primary-subtle);color:var(--blue-700)}
.bxt-badge--accent{background:var(--color-accent-subtle);color:var(--red-600)}
.bxt-badge--success{background:var(--color-success-subtle);color:var(--green-700)}
.bxt-badge--warning{background:var(--color-warning-subtle);color:var(--amber-700)}
.bxt-badge--solid{background:var(--color-primary);color:var(--color-on-primary)}
.bxt-badge--pill{border-radius:var(--radius-pill);padding-inline:var(--space-3)}
.bxt-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}

/* ============ Alert ============ */
.bxt-alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:var(--border-w) solid var(--border-default);border-left:var(--border-w-strong) solid var(--color-info);background:var(--surface-subtle);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-secondary)}
.bxt-alert__title{font-weight:var(--fw-semibold);color:var(--text-primary);margin:0 0 2px}
.bxt-alert--info{background:var(--color-primary-subtle);border-color:var(--blue-100);border-left-color:var(--color-info)}
.bxt-alert--success{background:var(--color-success-subtle);border-color:var(--green-50);border-left-color:var(--color-success)}
.bxt-alert--warning{background:var(--color-warning-subtle);border-color:var(--amber-50);border-left-color:var(--color-warning)}
.bxt-alert--danger{background:var(--color-danger-subtle);border-color:var(--red-100);border-left-color:var(--color-danger)}

/* ============ Table ============ */
.bxt-table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm);color:var(--text-primary)}
.bxt-table th{padding:var(--space-3) var(--space-4);text-align:left;font-family:var(--font-display);font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);border-bottom:var(--border-w) solid var(--border-default);white-space:nowrap}
.bxt-table td{padding:var(--space-3) var(--space-4);border-bottom:var(--border-w) solid var(--border-subtle);vertical-align:middle}
.bxt-table tbody tr:hover{background:var(--surface-subtle)}
.bxt-table--zebra tbody tr:nth-child(even){background:var(--surface-subtle)}
.bxt-table td.bxt-num,.bxt-table th.bxt-num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ============ Layout helpers ============ */
.bxt-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.bxt-container--narrow{max-width:var(--container-narrow)}
.bxt-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.bxt-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.bxt-divider{height:var(--border-w);background:var(--border-subtle);border:0;margin:0}

}