/*
 * Koder Design — UI style preset rules
 *
 * Source: ~/temp/koder-ui-style-previews.html (2026-05-09 prototype, ratified
 * as the visual reference of design-RFC-001). Only `.preset.*` selectors
 * are kept here; page chrome lives in base.css. Each preset declares its
 * own CSS custom properties on `.preset.<slug>` and the inner cards read
 * them via `var(--…)` with light-theme defaults.
 *
 * Stage container forces a light backdrop so previews render the same
 * regardless of the surrounding page theme.
 */
.stage, .stage-large {
  background: linear-gradient(180deg, #f5f5f5, #ececec);
  padding: 20px;
  border-radius: 8px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-large { padding: 40px; min-height: 360px; }
.preset .form-card {
  font-family: var(--font, 'Inter', sans-serif);
  background: var(--bg, #fff);
  color: var(--on-surface, #111);
  border-radius: var(--radius-lg, 12px);
  padding: var(--pad-form, 24px);
  box-shadow: var(--shadow-form, 0 4px 16px rgba(0,0,0,0.1));
  border: var(--border-form, none);
  width: 100%;
  max-width: 440px;
}
.preset .form-title {
  margin: 0 0 var(--gap-title, 20px);
  font-size: var(--font-size-title, 18px);
  font-weight: var(--font-weight-title, 600);
  letter-spacing: var(--letter-title, normal);
  color: var(--on-surface, #111);
}
.preset label {
  display: block;
  font-size: var(--font-size-label, 12px);
  font-weight: var(--font-weight-label, 500);
  color: var(--label-color, #555);
  margin-bottom: var(--gap-label, 6px);
  letter-spacing: var(--letter-label, normal);
  text-transform: var(--label-case, none);
}
.preset input {
  width: 100%;
  padding: var(--pad-y, 10px) var(--pad-x, 12px);
  font-family: inherit;
  font-size: var(--font-size-input, 14px);
  background: var(--surface, #fff);
  color: var(--on-surface, #111);
  border: var(--input-border, 1px solid #ccc);
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--gap-field, 14px);
  outline: none;
  transition: var(--motion, 150ms ease);
  box-shadow: var(--input-shadow, none);
}
.preset input:focus {
  border-color: var(--accent, #6750A4);
  box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent));
}
.preset .row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--row-gap, 12px);
}
.preset .actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: var(--gap-actions, 16px);
}
.preset button {
  padding: var(--pad-btn-y, 8px) var(--pad-btn-x, 20px);
  font-family: inherit;
  font-size: var(--font-size-btn, 14px);
  font-weight: var(--font-weight-btn, 500);
  border-radius: var(--radius-btn, var(--radius-md, 6px));
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--motion, 150ms ease);
  letter-spacing: var(--letter-btn, normal);
  text-transform: var(--btn-case, none);
}
.preset .btn-secondary {
  background: var(--btn-secondary-bg, transparent);
  color: var(--btn-secondary-fg, var(--on-surface, #111));
  border-color: var(--btn-secondary-border, transparent);
}
.preset .btn-primary {
  background: var(--accent, #6750A4);
  color: var(--accent-on, #fff);
  border-color: var(--btn-primary-border, var(--accent, #6750A4));
  box-shadow: var(--btn-shadow, none);
}
.preset .btn-secondary:hover { background: var(--btn-secondary-hover, rgba(0,0,0,0.05)); }
.preset .btn-primary:hover { background: var(--accent-strong, var(--accent, #6750A4)); }
/* ═══════════════════════════════════════════════════════════════
   GRUPO A — OS LOOK-ALIKES (10)
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   GRUPO B — AESTHETIC PERSONALITIES (9)
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO A EXTRA (OS modernos não cobertos) — 4
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO B EXTRA (aesthetic) — 5
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   PROPOSTAS — GRUPO C NOVO (Cultural/Regional) — 3
   ═══════════════════════════════════════════════════════════════ */