/* Walter component library — all classes consume the semantic tokens
   declared in colors_and_type.css. Load AFTER colors_and_type.css.
   Brand can be scoped via [data-brand="blue"|"purple"]; dark via .dark
   or [data-theme="dark"]. */

/* ---------- Button ---------- */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: var(--fw-medium) var(--label-2-size)/1 var(--font-sans);
  letter-spacing: var(--label-2-track);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: 0 14px; height: 36px;
  cursor: pointer; user-select: none;
  transition: background-color 120ms cubic-bezier(.2,0,0,1),
              color 120ms cubic-bezier(.2,0,0,1),
              border-color 120ms cubic-bezier(.2,0,0,1),
              box-shadow 120ms cubic-bezier(.2,0,0,1);
  white-space: nowrap;
}
.w-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.w-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* sizes */
.w-btn--xs { height: 28px; padding: 0 10px; border-radius: var(--radius-md); font-size: var(--label-3-size); }
.w-btn--sm { height: 32px; padding: 0 12px; border-radius: var(--radius-md); }
.w-btn--md { height: 36px; }
.w-btn--lg { height: 40px; padding: 0 16px; }
.w-btn--xl { height: 48px; padding: 0 20px; font-size: var(--label-1-size); border-radius: var(--radius-xl); }
.w-btn--icon { width: 36px; padding: 0; }
.w-btn--icon.w-btn--xs { width: 28px; }
.w-btn--icon.w-btn--sm { width: 32px; }
.w-btn--icon.w-btn--lg { width: 40px; }

/* Primary */
.w-btn--primary {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(26,26,26,0.08);
}
.w-btn--primary:hover { background: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-fg); }
.w-btn--primary:active { background: var(--btn-primary-active-bg); color: var(--btn-primary-active-fg); }
.w-btn--primary[disabled] { background: var(--btn-primary-disabled-bg); color: var(--btn-primary-disabled-fg); opacity: 1; }

/* Secondary */
.w-btn--secondary {
  background: var(--btn-secondary-bg); color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
  box-shadow: var(--shadow-xs);
}
.w-btn--secondary:hover { background: var(--btn-secondary-hover-bg); color: var(--btn-secondary-hover-fg); }
.w-btn--secondary:active { background: var(--btn-secondary-active-bg); color: var(--btn-secondary-active-fg); }

/* Plain / Muted */
.w-btn--plain { background: transparent; color: var(--btn-plain-fg); }
.w-btn--plain:hover { background: var(--btn-plain-hover-bg); color: var(--btn-plain-hover-fg); }
.w-btn--plain:active { background: var(--btn-plain-active-bg); color: var(--btn-plain-active-fg); }

.w-btn--muted { background: var(--btn-muted-bg); color: var(--btn-muted-fg); }
.w-btn--muted:hover { background: var(--btn-muted-hover-bg); color: var(--btn-muted-hover-fg); }
.w-btn--muted:active { background: var(--btn-muted-active-bg); color: var(--btn-muted-active-fg); }

.w-btn--white { background: #fff; color: var(--text-primary); border-color: var(--alpha-100); }
.w-btn--white:hover { background: var(--tw-neutral-50); }
.w-btn--dark { background: var(--tw-neutral-900); color: #fff; }
.w-btn--dark:hover { background: var(--tw-neutral-800); }

/* Danger */
.w-btn--danger { background: var(--btn-danger-primary-bg); color: var(--btn-danger-primary-fg); }
.w-btn--danger:hover { background: var(--btn-danger-primary-hover-bg); }
.w-btn--danger:active { background: var(--btn-danger-primary-active-bg); }

.w-btn--danger-secondary { background: var(--btn-danger-secondary-bg); color: var(--btn-danger-secondary-fg); }
.w-btn--danger-secondary:hover { background: var(--btn-danger-secondary-hover-bg); }
.w-btn--danger-secondary:active { background: var(--btn-danger-secondary-active-bg); }

.w-btn--danger-plain { background: transparent; color: var(--btn-danger-plain-fg); }
.w-btn--danger-plain:hover { background: var(--btn-danger-plain-hover-bg); }
.w-btn--danger-plain:active { background: var(--btn-danger-plain-active-bg); }

/* ---------- Input ---------- */
.w-input {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  padding: 0 12px; height: 36px;
  transition: border-color 120ms, box-shadow 120ms;
  caret-color: var(--caret);
}
.w-input:hover { border-color: var(--input-hover-border); }
.w-input input, .w-input textarea {
  border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
  font: var(--fw-regular) var(--body-2-size)/1 var(--font-sans);
  color: var(--text-primary);
  padding: 0;
  caret-color: var(--caret);
}
.w-input input::placeholder, .w-input textarea::placeholder { color: var(--text-placeholder); }
.w-input:focus-within { border-color: var(--input-focus-border); box-shadow: 0 0 0 4px var(--input-focus-ring); }
.w-input--error { border-color: var(--tw-red-500); }
.w-input--error:focus-within { box-shadow: var(--ring-danger); }
.w-input--lg { height: 44px; padding: 0 14px; border-radius: var(--radius-xl); }
.w-input--sm { height: 32px; padding: 0 10px; border-radius: var(--radius-md); font-size: var(--body-3-size); }
.w-input--disabled { background: var(--input-filled-bg); color: var(--text-disabled); }

.w-field { display: flex; flex-direction: column; gap: 6px; }
.w-field > label { font: var(--fw-medium) var(--label-3-size)/1.2 var(--font-sans); color: var(--text-secondary); letter-spacing: var(--label-3-track); }
.w-field > .help { font: var(--fw-regular) var(--body-4-size)/1.3 var(--font-sans); color: var(--text-tertiary); }
.w-field > .help.error { color: var(--tw-red-600); }

/* ---------- Badge ---------- */
.w-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font: var(--fw-medium) var(--label-3-size)/1 var(--font-sans);
  letter-spacing: var(--label-3-track);
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--badge-gray-bg); color: var(--badge-gray-fg); border: 1px solid var(--badge-gray-border);
}
.w-badge--solid-brand   { background: var(--primary); color: #fff; border-color: transparent; }
.w-badge--solid-black   { background: var(--tw-neutral-900); color: #fff; border-color: transparent; }
.w-badge--solid-success { background: var(--success); color: #fff; border-color: transparent; }
.w-badge--solid-danger  { background: var(--error);   color: #fff; border-color: transparent; }
.w-badge--solid-warning { background: var(--warning); color: var(--tw-neutral-900); border-color: transparent; }

.w-badge--soft-brand   { background: var(--badge-info-bg);    color: var(--badge-info-fg);    border-color: var(--badge-info-border); }
.w-badge--soft-success { background: var(--badge-success-bg); color: var(--badge-success-fg); border-color: var(--badge-success-border); }
.w-badge--soft-danger  { background: var(--badge-error-bg);   color: var(--badge-error-fg);   border-color: var(--badge-error-border); }
.w-badge--soft-warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); border-color: var(--badge-warning-border); }
.w-badge--soft-info    { background: var(--badge-info-bg);    color: var(--badge-info-fg);    border-color: var(--badge-info-border); }
.w-badge--outline      { background: transparent; border-color: var(--badge-gray-border); color: var(--badge-gray-fg); }
.w-badge--square       { border-radius: var(--radius-sm); }

/* ---------- Chip ---------- */
.w-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--fw-medium) var(--label-2-size)/1 var(--font-sans);
  padding: 6px 10px;
  background: var(--chip-unselected-bg); color: var(--chip-unselected-fg);
  border: 1px solid var(--chip-unselected-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 120ms cubic-bezier(.2,0,0,1);
}
.w-chip:hover { color: var(--chip-unselected-hover-fg); border-color: var(--chip-unselected-hover-border); }
.w-chip:active, .w-chip.is-pressed { background: var(--chip-unselected-active-bg); color: var(--chip-unselected-active-fg); }
.w-chip.is-selected { background: var(--chip-selected-bg); color: var(--chip-selected-fg); border-color: transparent; }
.w-chip.is-selected:hover { background: var(--chip-selected-hover-bg); }
.w-chip.is-selected:active { background: var(--chip-selected-active-bg); }
.w-chip .w-chip__avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.w-chip .w-chip__x { width: 14px; height: 14px; opacity: .5; }
.w-chip:hover .w-chip__x { opacity: 1; }

/* ---------- Avatar ---------- */
.w-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--tw-neutral-200); color: var(--text-primary);
  font: var(--fw-semibold) var(--label-2-size)/1 var(--font-sans);
  overflow: hidden; position: relative;
}
.w-avatar img { width: 100%; height: 100%; object-fit: cover; }
.w-avatar--xs { width: 20px; height: 20px; font-size: 10px; }
.w-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.w-avatar--md { width: 36px; height: 36px; }
.w-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.w-avatar--xl { width: 64px; height: 64px; font-size: 20px; }
.w-avatar--square { border-radius: var(--radius-lg); }
.w-avatar__dot { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface-1); }

/* ---------- Switch ---------- */
.w-switch {
  display: inline-flex; position: relative; width: 32px; height: 18px;
  background: var(--switch-off-bg); border-radius: var(--radius-pill);
  cursor: pointer; transition: background-color 120ms;
  border: 0; padding: 0;
}
.w-switch:hover { background: var(--switch-off-hover-bg); }
.w-switch::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 14px; height: 14px; background: var(--switch-off-handler); border-radius: 50%;
  transition: transform 120ms cubic-bezier(.2,0,0,1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.w-switch[aria-checked="true"] { background: var(--switch-on-bg); }
.w-switch[aria-checked="true"]:hover { background: var(--switch-on-hover-bg); }
.w-switch[aria-checked="true"]::after { transform: translateX(14px); background: var(--switch-on-handler); }
.w-switch--lg { width: 40px; height: 22px; }
.w-switch--lg::after { width: 18px; height: 18px; }
.w-switch--lg[aria-checked="true"]::after { transform: translateX(18px); }

/* ---------- Checkbox + Radio ---------- */
.w-check, .w-radio {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; cursor: pointer; position: relative;
  transition: background-color 120ms, border-color 120ms;
}
.w-check { border-radius: var(--radius-sm); background: var(--checkbox-unchecked-bg); border: 1px solid var(--checkbox-unchecked-border); }
.w-check:hover { background: var(--checkbox-unchecked-hover-bg); border-color: var(--checkbox-unchecked-hover-border); }
.w-check:checked { background: var(--checkbox-checked-bg); border-color: var(--checkbox-checked-border); }
.w-check:checked:hover { background: var(--checkbox-checked-hover-bg); }
.w-check:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: 2px solid var(--checkbox-checked-icon); border-top: 0; border-left: 0; transform: rotate(45deg);
}

.w-radio { border-radius: 50%; background: var(--radio-unchecked-bg); border: 1px solid var(--radio-unchecked-border); }
.w-radio:hover { border-color: var(--radio-unchecked-active-border); }
.w-radio:checked { background: var(--radio-checked-bg); border-color: var(--radio-checked-border); }
.w-radio:checked::after {
  content: ""; position: absolute; inset: 4px; background: var(--radio-checked-dot); border-radius: 50%;
}
.w-check:focus-visible, .w-radio:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Segmented Control ---------- */
.w-seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--seg-ctrl-bg); border-radius: var(--radius-lg);
  border: 1px solid var(--seg-ctrl-border);
}
.w-seg button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius-md);
  font: var(--fw-medium) var(--label-2-size)/1 var(--font-sans);
  color: var(--seg-ctrl-item-fg);
}
.w-seg button:hover { color: var(--seg-ctrl-item-hover-fg); background: var(--seg-ctrl-item-hover-bg); }
.w-seg button.active { background: var(--seg-ctrl-item-active-bg); color: var(--seg-ctrl-item-active-fg); box-shadow: var(--shadow-xs); }
.w-seg button[disabled] { color: var(--seg-ctrl-item-disabled-fg); cursor: not-allowed; }

/* ---------- Tooltip ---------- */
.w-tip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--tooltip-bg); color: var(--tooltip-fg);
  font: var(--fw-regular) 14px/20px var(--font-sans);
  letter-spacing: -0.16px;
  padding: 8px 12px;
  border-radius: 8px;
}
.w-tip--sm { padding: 4px 8px; }
.w-tip::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  background: var(--tooltip-bg);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.w-tip::after,
.w-tip--top-middle::after { bottom: -5px; left: 50%; transform: translateX(-50%); }
.w-tip--top-left::after    { bottom: -5px; left: 12px;  transform: none; }
.w-tip--top-right::after   { bottom: -5px; right: 12px; transform: none; }
.w-tip--bottom-middle::after { top: -5px; left: 50%; transform: translateX(-50%); bottom: auto; }
.w-tip--bottom-left::after   { top: -5px; left: 12px;  transform: none; bottom: auto; }
.w-tip--bottom-right::after  { top: -5px; right: 12px; transform: none; bottom: auto; }
.w-tip--left-middle::after  { right: -5px; top: 50%; transform: translateY(-50%); bottom: auto; left: auto; }
.w-tip--right-middle::after { left: -5px;  top: 50%; transform: translateY(-50%); bottom: auto; }

/* ---------- Kbd ---------- */
.w-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 2px 4px;
  border-radius: 6px;
  font: 500 12px/16px var(--font-sans);
  color: var(--kbd-fg);
  background: transparent; border: 1px solid transparent;
}
.w-tip .w-kbd { color: rgba(255,255,255,0.7); }
.w-kbd-light     { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 2px 4px; border-radius: 6px; background: var(--kbd-bg); color: var(--kbd-fg); font: 500 12px/16px var(--font-sans); }
.w-kbd-bordered  { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 2px 4px; border-radius: 6px; background: var(--kbd-bg); border: 1px solid var(--kbd-border); color: var(--kbd-fg); font: 500 12px/16px var(--font-sans); }
.w-kbd-border-only{ display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 2px 4px; border-radius: 6px; background: transparent; border: 1px solid var(--kbd-border); color: var(--kbd-fg); font: 500 12px/16px var(--font-sans); }

/* ---------- Progress Bar ---------- */
.w-progress {
  width: 100%; height: 6px; background: var(--progress-bg);
  border-radius: var(--radius-pill); overflow: hidden;
}
.w-progress__fill { height: 100%; background: var(--progress-filler); border-radius: inherit; transition: width 200ms; }

/* ---------- Menu ---------- */
.w-menu {
  background: var(--menu-bg); border: 1px solid var(--menu-border);
  border-radius: var(--radius-xl); padding: 4px;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
}
.w-menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
  font: var(--fw-regular) var(--body-2-size)/1 var(--font-sans);
  color: var(--menu-item-fg); cursor: pointer;
}
.w-menu__item:hover { background: var(--menu-item-hover-bg); color: var(--menu-item-hover-fg); }
.w-menu__item.is-active { background: var(--menu-item-active-bg); color: var(--menu-item-active-fg); }
.w-menu__item--danger { color: var(--btn-danger-plain-fg); }
.w-menu__item--danger:hover { background: var(--btn-danger-plain-hover-bg); color: var(--btn-danger-plain-fg); }
.w-menu__sep { height: 1px; background: var(--border-subtle); margin: 4px -4px; }
.w-menu__shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--menu-item-secondary-fg); }

/* ---------- Alert ---------- */
.w-alert {
  display: flex; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-xl);
  border: 1px solid var(--alpha-100);
  background: var(--alert-bg); color: var(--alert-header);
}
.w-alert__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--alert-default-icon); }
.w-alert__body { flex: 1; }
.w-alert__title { font: var(--fw-semibold) var(--label-2-size)/1.2 var(--font-sans); color: var(--alert-header); }
.w-alert__desc  { font: var(--fw-regular) var(--body-3-size)/1.4 var(--font-sans); color: var(--alert-subtext); margin-top: 2px; }
.w-alert--success .w-alert__icon { color: var(--alert-success-icon); }
.w-alert--success { border-left: 3px solid var(--alert-success-indicator); }
.w-alert--danger  .w-alert__icon { color: var(--alert-error-icon); }
.w-alert--danger  { border-left: 3px solid var(--alert-error-indicator); }
.w-alert--warning .w-alert__icon { color: var(--alert-warning-icon); }
.w-alert--warning { border-left: 3px solid var(--alert-warning-indicator); }
.w-alert--info    .w-alert__icon { color: var(--alert-info-icon); }
.w-alert--info    { border-left: 3px solid var(--alert-info-indicator); }

/* ---------- Card ---------- */
.w-card {
  background: var(--surface-raised); border: 1px solid var(--alpha-100);
  border-radius: var(--radius-2xl); padding: 20px;
}
.w-card--flat { box-shadow: none; }
.w-card--raised { box-shadow: var(--shadow-md); }

/* ---------- Link ---------- */
.w-link { color: var(--link-primary-fg); font-weight: var(--fw-medium); }
.w-link:hover { color: var(--link-primary-hover-fg); text-decoration: underline; }
.w-link:active { color: var(--link-primary-active-fg); }
.w-link--secondary { color: var(--link-secondary-fg); }
.w-link--secondary:hover { color: var(--link-secondary-hover-fg); }
.w-link--error { color: var(--link-error-fg); }
.w-link--error:hover { color: var(--link-error-hover-fg); }

/* ---------- Dropdown trigger ---------- */
.w-dropdown {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  background: var(--btn-secondary-bg); color: var(--btn-secondary-fg);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-lg);
  font: var(--fw-medium) var(--label-2-size)/1 var(--font-sans);
  cursor: pointer; min-width: 160px; justify-content: space-between;
}
.w-dropdown:hover { background: var(--btn-secondary-hover-bg); color: var(--btn-secondary-hover-fg); }

/* Helpers */
.w-stack { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.w-stack--tight { gap: 6px; }