/* =========================================================================
   primitives.css — the 9 shadcn/ui primitives (DESIGN.md v2 §2)
   Button / ToggleGroup / Switch / Badge / Input / Slider / Tabs
   (Card lives in card.css; Sheet/Toast/Alert live in overlay.css — they are
    composed surfaces, not the cross-page primitive core.)
   Dependency: tokens.css
   ========================================================================= */

/* ============================ 2.1 BUTTON ============================ */
/* 5 variant x 3 size, unified radius-md, disabled补齐. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border-radius: var(--radius-md);
  font-weight: 500; white-space: nowrap; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard),
              transform 100ms ease-in;
}
.btn:active { transform: scale(0.97); }
/* disabled (was specified opacity .5 in v1 DESIGN but never implemented — now mandatory) */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn iconify-icon { font-size: var(--icon-fs-lg); }

/* --- variants --- */
.btn--default { background: var(--primary); color: var(--primary-foreground); }
.btn--default:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); }

.btn--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn--secondary:hover { background: color-mix(in srgb, var(--secondary) 80%, var(--foreground)); }

.btn--outline { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn--outline:hover { background: var(--accent); color: var(--accent-foreground); }

.btn--ghost { background: transparent; color: var(--foreground); }
.btn--ghost:hover { background: var(--accent); color: var(--accent-foreground); }

.btn--destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn--destructive:hover { background: color-mix(in srgb, var(--destructive) 90%, transparent); }
.btn--destructive:focus-visible { outline-color: var(--destructive); }

/* --- sizes --- */
.btn--default-size { padding: var(--sp-2) var(--sp-3); min-height: 36px; font-size: var(--fs-body-sm); }
.btn--sm { padding: var(--sp-1) var(--sp-2); min-height: 32px; font-size: var(--fs-body-sm); }
.btn--icon { padding: var(--sp-2); width: 40px; height: 40px; }
.btn--icon-sm { padding: 0; width: var(--btn-icon-sm); height: var(--btn-icon-sm); }

/* ============================ 2.2 TOGGLE GROUP ============================ */
/* type=single. data-state="on|off" drives the selected fill (chip + hero share
   ONE rule). aria-checked / aria-pressed kept for a11y. swatch keeps its colour
   so it uses a double-ring but its signal colour is still --accent-live. */
.toggle-group { display: inline-flex; align-items: center; gap: var(--sp-1); }
.toggle-group--swatches { gap: var(--sp-1); }

.toggle-item {
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.toggle-item:disabled, .toggle-item[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* --- chip (style filter) --- */
.toggle-item--chip {
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  font-size: var(--fs-body-sm); border: 1px solid var(--border);
  background: var(--card); color: var(--muted-foreground); white-space: nowrap;
}
.toggle-item--chip:hover { color: var(--foreground); }

/* --- selected fill for chip (style filter) --- */
.toggle-item--chip[data-state="on"] {
  background: var(--accent-live); color: var(--primary-foreground); border-color: var(--accent-live);
}

/* --- swatch (colour token — keeps its own colour, double-ring when on) --- */
.toggle-item--swatch {
  width: var(--swatch-size); height: var(--swatch-size); border-radius: var(--radius-full);
  border: 1px solid var(--border);
}
.toggle-item--swatch:hover { transform: scale(1.12); }
.toggle-item--swatch[data-state="on"] {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--accent-live);
}
.toggle-item--swatch.is-current {
  background: var(--card); position: relative; color: var(--muted-foreground);
  display: grid; place-items: center; font-size: 11px;
}

/* ============================ 2.3 SWITCH ============================ */
.switch { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); white-space: nowrap; }
.switch:disabled, .switch[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.switch__track {
  width: var(--switch-w); height: var(--switch-h); border-radius: var(--radius-full);
  background: var(--border); position: relative; flex: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: var(--switch-thumb); height: var(--switch-thumb);
  border-radius: var(--radius-full); background: var(--background);
  transition: transform var(--dur-fast) var(--ease-standard); box-shadow: var(--elevation-card-hover);
}
.switch[aria-pressed="true"] .switch__track { background: var(--accent-live); }
.switch[aria-pressed="true"] .switch__track::after { transform: translateX(16px); }

/* ============================ 2.4 BADGE ============================ */
/* 5 variant, all share .badge base; license labels use DARKENED -text token
   (HARD CONSTRAINT), tints mix in srgb to avoid oklch hue-drift. */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--badge-pad-y) var(--sp-2); border-radius: var(--radius-full);
  font-size: var(--fs-caption); font-weight: 500; line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption); border: 1px solid var(--border); background: var(--secondary);
  color: var(--secondary-foreground);
}
.badge iconify-icon { font-size: var(--icon-fs-xs); }
.badge--free {
  color: var(--license-free-text);
  border-color: color-mix(in srgb, var(--license-free) 30%, var(--border));
  background: color-mix(in srgb, var(--license-free) 10%, var(--card));
}
.badge--free iconify-icon { color: var(--license-free); }
.badge--attrib {
  color: var(--license-attrib-text);
  border-color: color-mix(in srgb, var(--license-attrib) 40%, var(--border));
  background: color-mix(in srgb, var(--license-attrib) 12%, var(--card));
  cursor: help;
}
.badge--attrib iconify-icon { color: var(--license-attrib); }
.badge--paid { color: var(--license-paid-text); }
.badge--paid iconify-icon { color: var(--license-paid); }
.badge--count { color: var(--badge-muted-text); }
.badge--weight-stroke { color: var(--foreground); }
.badge--weight-wght { color: var(--foreground); }
.badge--weight-fixed { color: var(--badge-muted-text); }
.badge--weight-none { color: var(--badge-muted-text); }

/* ============================ 2.8 INPUT / INPUTGROUP ============================ */
.input-group {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input-group:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent); }
.input-group[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.input-group iconify-icon { color: var(--muted-foreground); font-size: var(--icon-fs-md); flex: none; }
.input-group input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  color: var(--foreground); font-size: var(--fs-body);
}
.input-group input:disabled { opacity: 0.5; pointer-events: none; }
.input-group input::placeholder { color: var(--muted-foreground); }

/* ============================ 2.7 SLIDER ============================ */
.slider {
  display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
}
.slider__label { font-size: var(--fs-body-sm); color: var(--muted-foreground); display: flex; align-items: center; gap: var(--sp-1); }
.slider__val { font-variant-numeric: tabular-nums; color: var(--foreground); min-width: 3.2ch; text-align: right; font-size: var(--fs-body-sm); }
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: var(--slider-w); height: var(--slider-hit);  /* 44px hit area */
  background: transparent; cursor: pointer;
}
.slider input[type="range"]:disabled { opacity: 0.5; pointer-events: none; }
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--slider-track-h); border-radius: var(--radius-full); background: var(--border);
}
.slider input[type="range"]::-moz-range-track {
  height: var(--slider-track-h); border-radius: var(--radius-full); background: var(--border);
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--slider-thumb); height: var(--slider-thumb);
  margin-top: calc((var(--slider-track-h) - var(--slider-thumb)) / 2);
  border-radius: var(--radius-full);
  background: var(--accent-live); border: 2px solid var(--background);
  box-shadow: var(--elevation-card-hover);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.slider input[type="range"]::-moz-range-thumb {
  width: var(--slider-thumb); height: var(--slider-thumb); border-radius: var(--radius-full);
  background: var(--accent-live); border: 2px solid var(--background); box-shadow: var(--elevation-card-hover);
}
.slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider input[type="range"]:focus-visible { outline: none; }
.slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent); }
.slider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent); }

/* ============================ 2.6 TABS ============================ */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--card-divider); padding-inline: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--sp-3) var(--sp-3); font-size: var(--fs-body-sm); color: var(--muted-foreground);
  border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--accent-live); }
.tab:hover { color: var(--foreground); }