/* ============================================================
   BUNDLEAF — COMPONENT LAYER
   Atoms + molecules built only from semantic tokens.
   Requires tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-bundleaf-foreground);
  background: var(--color-bundleaf-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

/* ---------- TYPOGRAPHY ---------- */
.bl-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); line-height: var(--lh-display-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.bl-display-l  { font-family: var(--font-display); font-size: var(--text-display-l);  line-height: var(--lh-display-l);  font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.bl-h1 { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.bl-h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.bl-h3 { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.bl-h4 { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--weight-semibold); }
.bl-h5 { font-family: var(--font-sans); font-size: var(--text-h5); line-height: var(--lh-h5); font-weight: var(--weight-semibold); }
.bl-h6 { font-family: var(--font-sans); font-size: var(--text-h6); line-height: var(--lh-h6); font-weight: var(--weight-semibold); }
.bl-body-lg { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); }
.bl-body    { font-size: var(--text-body); line-height: var(--lh-body); }
.bl-body-sm { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); }
.bl-caption { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-bundleaf-muted-foreground); }
.bl-eyebrow { font-size: var(--text-caption); line-height: 1; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-bundleaf-primary-foreground); }
.bl-muted   { color: var(--color-bundleaf-muted-foreground); }

/* mono helpers */
.bl-mono { font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--lh-mono); font-feature-settings: "zero" 1; }
.bl-token {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal); color: var(--color-bundleaf-meta);
  background: var(--color-bundleaf-surface-muted);
  border: 1px solid var(--color-bundleaf-border);
  border-radius: var(--radius-xs); padding: 1px 6px; white-space: nowrap;
}
.bl-money { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; font-weight: var(--weight-medium); }
.bl-kbd {
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; color: var(--color-bundleaf-muted-foreground);
  background: var(--color-bundleaf-surface); border: 1px solid var(--color-bundleaf-border-strong);
  border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 3px 5px; min-width: 18px; text-align: center; display: inline-block;
}
.bl-link {
  color: var(--color-bundleaf-primary-foreground); text-decoration: none; font-weight: var(--weight-medium);
  text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
}
.bl-link:hover { text-decoration: underline; }

/* ---------- BUTTON ---------- */
.bl-btn {
  --_bg: transparent; --_fg: var(--color-bundleaf-foreground); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  line-height: 1; letter-spacing: var(--tracking-snug);
  padding: 0 var(--space-4); height: 38px; border-radius: var(--radius-md);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  cursor: pointer; white-space: nowrap; 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), transform var(--dur-instant) var(--ease-standard);
}
.bl-btn { text-decoration: none; }
.bl-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.bl-btn:active { transform: translateY(0.5px); }
.bl-btn svg { width: 16px; height: 16px; flex: none; }

.bl-btn--primary { --_bg: var(--color-bundleaf-primary); --_fg: var(--color-bundleaf-on-primary); box-shadow: var(--shadow-xs); }
.bl-btn--primary:hover { --_bg: var(--color-bundleaf-primary-hover); }
.bl-btn--primary:active { --_bg: var(--color-bundleaf-primary-active); }

.bl-btn--secondary { --_bg: var(--color-bundleaf-surface); --_fg: var(--color-bundleaf-foreground); --_bd: var(--color-bundleaf-border-strong); box-shadow: var(--shadow-xs); }
.bl-btn--secondary:hover { --_bg: var(--color-bundleaf-primary-soft); --_bd: var(--color-bundleaf-primary); --_fg: var(--color-bundleaf-primary-foreground); }

.bl-btn--outline { --_bg: transparent; --_fg: var(--color-bundleaf-primary-foreground); --_bd: var(--color-bundleaf-primary); }
.bl-btn--outline:hover { --_bg: var(--color-bundleaf-primary-soft); }

.bl-btn--ghost { --_bg: transparent; --_fg: var(--color-bundleaf-foreground); }
.bl-btn--ghost:hover { --_bg: var(--color-bundleaf-primary-surface); --_bd: var(--color-bundleaf-primary); --_fg: var(--color-bundleaf-primary-foreground); }

.bl-btn--link { --_bg: transparent; --_fg: var(--color-bundleaf-primary-foreground); height: auto; padding: 0; }
.bl-btn--link:hover { text-decoration: underline; }

.bl-btn--destructive { --_bg: var(--color-bundleaf-destructive); --_fg: #fff; box-shadow: var(--shadow-xs); }
.bl-btn--destructive:hover { --_bg: var(--color-clay-600); }

.bl-btn--accent { --_bg: var(--color-bundleaf-accent); --_fg: var(--color-bundleaf-on-accent); box-shadow: var(--shadow-xs); }
.bl-btn--accent:hover { --_bg: var(--color-leaf-500); }

.bl-btn--sm { height: 30px; padding: 0 var(--space-3); font-size: var(--text-caption); border-radius: var(--radius-sm); }
.bl-btn--lg { height: 46px; padding: 0 var(--space-6); font-size: var(--text-body); }
.bl-btn--icon { width: 38px; padding: 0; }
.bl-btn--icon.bl-btn--sm { width: 30px; }
.bl-btn[disabled], .bl-btn--disabled { opacity: 0.45; pointer-events: none; box-shadow: none; }
.bl-btn--loading { color: transparent !important; position: relative; pointer-events: none; }
.bl-btn--loading::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--color-bundleaf-on-primary);
  animation: bl-spin 0.6s linear infinite;
}
@keyframes bl-spin { to { transform: rotate(360deg); } }

/* ---------- INPUT / TEXTAREA / SELECT ---------- */
.bl-input, .bl-textarea, .bl-select {
  width: 100%; font-family: var(--font-sans); font-size: var(--text-body-sm);
  color: var(--color-bundleaf-foreground); background: var(--color-bundleaf-surface);
  border: 1px solid var(--color-bundleaf-border-strong); border-radius: var(--radius-md);
  padding: 0 var(--space-3); height: 38px; line-height: 36px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.bl-textarea { height: auto; min-height: 88px; padding: var(--space-2_5) var(--space-3); line-height: 1.55; resize: vertical; }
.bl-input::placeholder, .bl-textarea::placeholder { color: var(--color-bundleaf-subtle-foreground); }
.bl-input:hover, .bl-textarea:hover, .bl-select:hover { border-color: var(--color-bundleaf-muted-foreground); }
.bl-input:focus, .bl-textarea:focus, .bl-select:focus { outline: none; border-color: var(--color-bundleaf-primary); box-shadow: var(--shadow-focus); }
.bl-input[disabled], .bl-textarea[disabled] { background: var(--color-bundleaf-surface-muted); opacity: 0.7; cursor: not-allowed; }
.bl-input--invalid { border-color: var(--color-bundleaf-destructive); }
.bl-input--invalid:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-bundleaf-destructive) 35%, transparent); }
.bl-select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23756B5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px;
}

/* field wrapper with leading/trailing affordances */
.bl-field { display: flex; flex-direction: column; gap: var(--space-1_5); }
.bl-field__label { font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--color-bundleaf-foreground); }
.bl-field__hint { font-size: var(--text-caption); color: var(--color-bundleaf-muted-foreground); }
.bl-field__error { font-size: var(--text-caption); color: var(--color-bundleaf-destructive-foreground); }
.bl-input-group { position: relative; display: flex; align-items: center; }
.bl-input-group .bl-input { padding-left: 34px; }
.bl-input-group__icon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--color-bundleaf-subtle-foreground); pointer-events: none; }

/* ---------- CHECKBOX / RADIO / SWITCH ---------- */
.bl-check, .bl-radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-body-sm); }
.bl-check input, .bl-radio input { position: absolute; opacity: 0; }
.bl-check__box, .bl-radio__box {
  width: 18px; height: 18px; flex: none; border: 1.5px solid var(--color-bundleaf-border-strong);
  background: var(--color-bundleaf-surface); display: grid; place-items: center; transition: all var(--dur-fast);
}
.bl-check__box { border-radius: var(--radius-xs); }
.bl-radio__box { border-radius: var(--radius-full); }
.bl-check__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(0.6); transition: all var(--dur-fast); }
.bl-check input:checked + .bl-check__box { background: var(--color-bundleaf-primary); border-color: var(--color-bundleaf-primary); }
.bl-check input:checked + .bl-check__box svg { opacity: 1; transform: scale(1); }
.bl-radio input:checked + .bl-radio__box { border-color: var(--color-bundleaf-primary); border-width: 5px; }
.bl-check input:focus-visible + .bl-check__box, .bl-radio input:focus-visible + .bl-radio__box { box-shadow: var(--shadow-focus); }

.bl-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.bl-switch input { position: absolute; opacity: 0; }
.bl-switch__track { width: 38px; height: 22px; border-radius: var(--radius-full); background: var(--color-bundleaf-border-strong); transition: background var(--dur-base); position: relative; }
.bl-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-standard); }
.bl-switch input:checked + .bl-switch__track { background: var(--color-bundleaf-primary); }
.bl-switch input:checked + .bl-switch__track::after { transform: translateX(16px); }
.bl-switch input:focus-visible + .bl-switch__track { box-shadow: var(--shadow-focus); }

/* ---------- BADGE / STATUS PILL ---------- */
.bl-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-caption); font-weight: var(--weight-medium);
  line-height: 1; padding: 4px 9px; border-radius: var(--radius-full); white-space: nowrap;
  background: var(--color-bundleaf-surface-muted); color: var(--color-bundleaf-muted-foreground); border: 1px solid var(--color-bundleaf-border);
}
.bl-badge--solid { background: var(--color-bundleaf-primary); color: var(--color-bundleaf-on-primary); border-color: transparent; }
.bl-badge--primary { background: var(--color-bundleaf-primary-soft); color: var(--color-bundleaf-primary-foreground); border-color: transparent; }
.bl-badge--success { background: var(--color-bundleaf-success-soft); color: var(--color-bundleaf-success-foreground); border-color: transparent; }
.bl-badge--info { background: var(--color-bundleaf-info-soft); color: var(--color-bundleaf-info-foreground); border-color: transparent; }
.bl-badge--attention { background: var(--color-bundleaf-attention-soft); color: var(--color-bundleaf-attention-foreground); border-color: transparent; }
.bl-badge--destructive { background: var(--color-bundleaf-destructive-soft); color: var(--color-bundleaf-destructive-foreground); border-color: transparent; }
.bl-badge--secondary { background: var(--color-bundleaf-secondary-soft); color: var(--color-bundleaf-secondary-foreground); border-color: transparent; }

.bl-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-medium); }
.bl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 18%, transparent); }
.bl-status--draft { color: var(--color-bundleaf-muted-foreground); }
.bl-status--sent { color: var(--color-bundleaf-info); }
.bl-status--accepted { color: var(--color-bundleaf-success); }
.bl-status--rejected { color: var(--color-bundleaf-destructive); }
.bl-status--expired { color: var(--color-bundleaf-attention); }

/* ---------- AVATAR ---------- */
.bl-avatar {
  width: 34px; height: 34px; border-radius: var(--radius-full); display: grid; place-items: center;
  font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-bundleaf-on-primary);
  background: var(--color-bundleaf-primary); flex: none; overflow: hidden;
}
.bl-avatar--sm { width: 26px; height: 26px; font-size: var(--text-caption); }
.bl-avatar--lg { width: 44px; height: 44px; font-size: var(--text-body); }

/* ---------- CARD ---------- */
.bl-card {
  background: var(--color-bundleaf-surface); border: 1px solid var(--color-bundleaf-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.bl-card--pad { padding: var(--space-5); }
.bl-card--interactive { transition: box-shadow var(--dur-base), border-color var(--dur-base), transform var(--dur-base); cursor: pointer; }
.bl-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--color-bundleaf-border-strong); transform: translateY(-1px); }

/* ---------- DIVIDER ---------- */
.bl-divider { height: 1px; background: var(--color-bundleaf-border); border: 0; margin: 0; }
.bl-divider--v { width: 1px; height: auto; align-self: stretch; }

/* ---------- TOOLTIP ---------- */
.bl-tooltip {
  background: var(--color-sand-900); color: var(--color-sand-50); font-size: var(--text-caption);
  padding: 5px 9px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: inline-block;
}
[data-theme="dark"] .bl-tooltip { background: #383027; color: var(--color-sand-50); }

/* ---------- ALERT ---------- */
.bl-alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid; font-size: var(--text-body-sm); }
.bl-alert__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.bl-alert__title { font-weight: var(--weight-semibold); margin: 0 0 2px; }
.bl-alert--info { background: var(--color-bundleaf-info-soft); border-color: color-mix(in oklab, var(--color-bundleaf-info) 30%, transparent); color: var(--color-bundleaf-info-foreground); }
.bl-alert--success { background: var(--color-bundleaf-success-soft); border-color: color-mix(in oklab, var(--color-bundleaf-success) 30%, transparent); color: var(--color-bundleaf-success-foreground); }
.bl-alert--attention { background: var(--color-bundleaf-attention-soft); border-color: color-mix(in oklab, var(--color-bundleaf-attention) 35%, transparent); color: var(--color-bundleaf-attention-foreground); }
.bl-alert--destructive { background: var(--color-bundleaf-destructive-soft); border-color: color-mix(in oklab, var(--color-bundleaf-destructive) 35%, transparent); color: var(--color-bundleaf-destructive-foreground); }

/* ---------- TABLE ---------- */
.bl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-body-sm); }
.bl-table th { text-align: left; font-weight: var(--weight-medium); color: var(--color-bundleaf-muted-foreground); font-size: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--space-2_5) var(--space-3); background: var(--color-bundleaf-surface-muted); border-bottom: 1px solid var(--color-bundleaf-border); white-space: nowrap; }
.bl-table th:first-child { border-top-left-radius: var(--radius-md); }
.bl-table th:last-child { border-top-right-radius: var(--radius-md); }
.bl-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-bundleaf-border); vertical-align: middle; }
.bl-table tbody tr { transition: background var(--dur-fast); }
.bl-table tbody tr:hover { background: var(--color-bundleaf-surface-muted); }
.bl-table--num td.bl-num, .bl-table th.bl-num { text-align: right; font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ---------- TABS ---------- */
.bl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-bundleaf-border); }
.bl-tab { appearance: none; border: 0; background: none; font-family: var(--font-sans); font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--color-bundleaf-muted-foreground); padding: var(--space-2_5) var(--space-3); cursor: pointer; position: relative; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color var(--dur-fast), background var(--dur-fast); }
.bl-tab:hover { color: var(--color-bundleaf-foreground); background: var(--color-bundleaf-surface-muted); }
.bl-tab[aria-selected="true"] { color: var(--color-bundleaf-primary-foreground); }
.bl-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 2px; background: var(--color-bundleaf-primary); border-radius: 2px 2px 0 0; }

/* ---------- SKELETON ---------- */
.bl-skeleton { background: linear-gradient(90deg, var(--color-bundleaf-surface-muted) 25%, var(--color-bundleaf-surface-sunken) 37%, var(--color-bundleaf-surface-muted) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); animation: bl-shimmer 1.4s ease infinite; }
@keyframes bl-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- QUANTITY STEPPER ---------- */
.bl-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-bundleaf-border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bundleaf-surface); height: 32px; }
.bl-stepper button { appearance: none; border: 0; background: none; width: 30px; height: 100%; cursor: pointer; color: var(--color-bundleaf-muted-foreground); display: grid; place-items: center; transition: background var(--dur-fast); }
.bl-stepper button:hover { background: var(--color-bundleaf-surface-muted); color: var(--color-bundleaf-foreground); }
.bl-stepper input { width: 40px; height: 100%; border: 0; border-left: 1px solid var(--color-bundleaf-border); border-right: 1px solid var(--color-bundleaf-border); text-align: center; font-family: var(--font-mono); font-size: var(--text-body-sm); background: none; color: var(--color-bundleaf-foreground); }
.bl-stepper input:focus { outline: none; }

/* ---------- SEGMENTED ---------- */
.bl-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--color-bundleaf-surface-muted); border-radius: var(--radius-md); border: 1px solid var(--color-bundleaf-border); }
.bl-segmented button { appearance: none; border: 0; background: none; font-family: var(--font-sans); font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-bundleaf-muted-foreground); padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--dur-fast); }
.bl-segmented button[aria-pressed="true"] { background: var(--color-bundleaf-surface); color: var(--color-bundleaf-foreground); box-shadow: var(--shadow-xs); }

/* ---------- focus utility ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: none; }