/* Roma components. Requires tokens/tokens.css.
   Classes use the tl- (Tomato Lab) prefix so they survive a rename of the system.
   The .is-hover / .is-pressed / .is-focus classes only exist to show states in the docs. */

/* ---------- Button ---------- */
.tl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: var(--control-height-md);
  padding: 0 var(--space-24);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
  font: var(--text-action-md);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}
.tl-button:hover, .tl-button.is-hover { background: var(--color-action-primary-bg-hover); }
.tl-button:active, .tl-button.is-pressed { background: var(--color-action-primary-bg-pressed); }

.tl-button--secondary { background: var(--color-action-secondary-bg); color: var(--color-action-secondary-text); }
.tl-button--secondary:hover, .tl-button--secondary.is-hover { background: var(--color-action-secondary-bg-hover); }
.tl-button--secondary:active, .tl-button--secondary.is-pressed { background: var(--color-action-secondary-bg-pressed); }

.tl-button--outline {
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--border-width-2) var(--color-border-default);
}
.tl-button--outline:hover, .tl-button--outline.is-hover { background: var(--color-bg-muted); }
.tl-button--outline:active, .tl-button--outline.is-pressed { background: var(--color-bg-inverse); color: var(--color-text-inverse); }

.tl-button--lg { height: var(--control-height-lg); padding: 0 var(--space-32); font: var(--text-action-lg); }

.tl-button:disabled, .tl-button[aria-disabled="true"] {
  background: var(--color-action-disabled-bg);
  color: var(--color-action-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}
.tl-button--outline:disabled, .tl-button--outline[aria-disabled="true"] {
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-2) var(--color-border-subtle);
}

/* ---------- Text input ---------- */
.tl-field { display: grid; gap: var(--space-8); max-width: 100%; }
.tl-field__label { font: var(--text-label-m); color: var(--color-text-primary); }
.tl-field__help { display: flex; align-items: center; gap: var(--space-4); font: var(--text-caption); color: var(--color-text-secondary); }

.tl-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height-md);
  padding: 0 var(--space-16);
  border: var(--border-width-1) solid var(--color-border-default);
  border-radius: var(--radius-none);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: var(--text-body-m);
}
.tl-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.tl-input:hover, .tl-input.is-hover { box-shadow: inset 0 0 0 var(--border-width-1) var(--color-border-default); }
.tl-input:focus-visible, .tl-input.is-focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--color-border-focus);
}
.tl-input[aria-invalid="true"] {
  border-color: var(--color-feedback-danger-fg);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--color-feedback-danger-fg);
}
.tl-input:disabled {
  background: var(--color-action-disabled-bg);
  border-color: var(--color-border-subtle);
  color: var(--color-action-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}
.tl-field:has(.tl-input:disabled) .tl-field__label,
.tl-field:has(.tl-input:disabled) .tl-field__help { color: var(--color-text-muted); }
.tl-field:has(.tl-input[aria-invalid="true"]) .tl-field__help { color: var(--color-feedback-danger-fg); }
.tl-field:has(.tl-input[aria-invalid="true"]) .tl-field__help::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-feedback-danger-fg);
  color: var(--color-bg-surface);
  font: 900 11px/1 var(--font-text);
}

/* ---------- Checkbox, radio, toggle ---------- */
.tl-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font: var(--text-body-m);
  color: var(--color-text-primary);
  cursor: pointer;
}
.tl-choice:has(input:disabled) { color: var(--color-text-muted); cursor: not-allowed; }

.tl-checkbox, .tl-radio, .tl-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  box-sizing: border-box;
  border: var(--border-width-2) solid var(--color-border-default);
  background: var(--color-bg-surface);
  cursor: inherit;
}
.tl-checkbox:hover, .tl-checkbox.is-hover,
.tl-radio:hover, .tl-radio.is-hover,
.tl-toggle:hover, .tl-toggle.is-hover { background-color: var(--color-bg-muted); }
.tl-checkbox.is-focus, .tl-radio.is-focus, .tl-toggle.is-focus {
  outline: var(--border-width-2) solid var(--color-border-focus);
  outline-offset: 2px;
}

.tl-checkbox { width: 24px; height: 24px; border-radius: var(--radius-none); display: inline-grid; place-items: center; }
.tl-checkbox::after { content: ""; width: 14px; height: 14px; }
.tl-checkbox:checked, .tl-checkbox:indeterminate {
  background-color: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-bg);
}
.tl-checkbox:checked:hover, .tl-checkbox:checked.is-hover { background-color: var(--color-action-primary-bg-hover); }
.tl-checkbox:checked::after {
  background: var(--color-action-primary-text);
  clip-path: polygon(10% 52%, 24% 38%, 40% 55%, 78% 14%, 92% 28%, 40% 82%);
}
.tl-checkbox:indeterminate::after { height: 3px; width: 12px; background: var(--color-action-primary-text); }

.tl-radio { width: 24px; height: 24px; border-radius: var(--radius-full); }
.tl-radio:checked {
  border-color: var(--color-action-primary-bg);
  background-image: radial-gradient(circle, var(--color-action-primary-bg) 5.5px, transparent 6px);
}

.tl-toggle { position: relative; width: 48px; height: 28px; border-radius: var(--radius-full); }
.tl-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
  transition: transform 120ms ease;
}
.tl-toggle:checked { background-color: var(--color-action-primary-bg); border-color: var(--color-action-primary-bg); }
.tl-toggle:checked:hover, .tl-toggle:checked.is-hover { background-color: var(--color-action-primary-bg-hover); }
.tl-toggle:checked::before { transform: translateX(20px); background: var(--color-action-primary-text); }
@media (prefers-reduced-motion: reduce) { .tl-toggle::before { transition: none; } }

.tl-checkbox:disabled, .tl-radio:disabled, .tl-toggle:disabled {
  background-color: var(--color-action-disabled-bg);
  border-color: var(--color-border-subtle);
}
.tl-checkbox:disabled::after, .tl-toggle:disabled::before { background: var(--color-action-disabled-text); }
.tl-radio:checked:disabled { background-image: radial-gradient(circle, var(--color-action-disabled-text) 5.5px, transparent 6px); }

/* ---------- Tag and badge ---------- */
.tl-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-none);
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 var(--border-width-1) var(--color-border-subtle);
  font: var(--text-label-s);
  white-space: nowrap;
}
.tl-tag--inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); box-shadow: none; }
.tl-tag--danger { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg); box-shadow: none; }
.tl-tag--success { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); box-shadow: none; }
.tl-tag--info { background: var(--color-feedback-info-bg); color: var(--color-feedback-info-fg); box-shadow: none; }
.tl-tag--warning { background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning-fg); box-shadow: none; }

.tl-badge {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font: var(--text-label-s);
}
.tl-badge--dot { min-width: 0; width: 12px; height: 12px; padding: 0; background: var(--color-bg-accent); }

/* ---------- Animated logo ----------
   Rebuilt from the tomatolab.org SVGator animation: the circle and square draw
   as single strokes (1.5s), and the wordmark wipes in left to right (0.3s to 1.5s).
   Use with the inline SVG from assets/logos/animated.svg. Add .is-replaying
   briefly (or re-insert the SVG) to play it again. */
.tl-logo-draw .la-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tl-logo-draw 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
}
.tl-logo-draw .la-word {
  clip-path: inset(0 100% 0 0);
  animation: tl-logo-wipe 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s forwards;
}
@keyframes tl-logo-draw { to { stroke-dashoffset: 0; } }
@keyframes tl-logo-wipe { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .tl-logo-draw .la-stroke, .tl-logo-draw .la-word { animation: none; stroke-dashoffset: 0; clip-path: none; }
}