/* ============================================================ */
/* ciiic-ui.css — framework-agnostische CIIIC-UI-klassen (v0.1.0) */
/* ============================================================ */
/* Starter-set voor niveau-2-adopters (zie README, adoptieniveaus). */
/* Bouwt volledig op ciiic-tokens.css — importeer die eerst:         */
/*                                                                    */
/*   @import './ciiic-tokens.css';                                    */
/*   @import './ciiic-ui.css';                                        */
/*                                                                    */
/* Alle klassen zijn geprefixt met `ciiic-` zodat ze niet botsen met  */
/* bestaande app-/plugin-CSS (bv. Gravity Forms). Bewust theme-neutraal*/
/* opgezet: werkt op een lichte én een donkere app-achtergrond, omdat  */
/* de dark-theme-semantiek (surfaces/status/glass) NIET in de tokens   */
/* zit. Waar een kleur van de app-achtergrond moet afhangen, gebruiken */
/* we `currentColor` i.p.v. een hard wit/zwart.                        */
/*                                                                     */
/* Nog niet in deze starter: de volledige status-ladder (open/         */
/* announced/expected/closed) — die leunt op de per-app theme-laag.    */
/* ============================================================ */

/* ============================================================ */
/* Buttons                                                       */
/* ============================================================ */
.ciiic-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-heading, var(--font-sans, inherit));
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    color var(--duration-slow) var(--ease-reveal),
    background-color var(--duration-slow) var(--ease-reveal),
    border-color var(--duration-slow) var(--ease-reveal),
    transform var(--transition-hover-lift),
    box-shadow var(--duration-slow) var(--ease-reveal);
}

.ciiic-btn:hover {
  transform: translateY(-2px);
}

.ciiic-btn:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

.ciiic-btn:focus-visible {
  outline: 2px solid var(--color-lime);
  outline-offset: 3px;
}

.ciiic-btn:disabled,
.ciiic-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — lime vlak, matte-black label. Theme-neutraal: leest op elke
   achtergrond, omdat beide kleuren brand-primitieven zijn. */
.ciiic-btn--primary {
  background: var(--color-lime);
  color: var(--color-offblack);
}

.ciiic-btn--primary:hover {
  box-shadow: 0 8px 24px rgba(var(--color-lime-rgb), 0.25);
}

/* Outline — leent de tekstkleur van de context (currentColor), dus het
   past zich aan de app-achtergrond aan; vult lime op hover. */
.ciiic-btn--outline {
  background: transparent;
  color: currentColor;
  border: 1.5px solid currentColor;
}

.ciiic-btn--outline:hover {
  background: var(--color-lime);
  color: var(--color-offblack);
  border-color: var(--color-lime);
}

/* Ghost — minimaal, tekst-only. */
.ciiic-btn--ghost {
  background: transparent;
  color: currentColor;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  opacity: 0.75;
}

.ciiic-btn--ghost:hover {
  opacity: 1;
  transform: none;
}

/* Sizes */
.ciiic-btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  gap: var(--space-xs);
}

.ciiic-btn--lg {
  padding: 1rem 2.25rem;
  font-size: 1rem;
  gap: 0.6rem;
}

.ciiic-btn--block {
  display: flex;
  width: 100%;
}

/* Bezig — voor een knop die werk buiten de app start (een model, een API).
   Hangt op `aria-busy`, zodat één attribuut zowel de ring toont als het aan
   een screenreader zegt. Een ring vóór de tekst in currentColor, dus hij werkt
   op elke variant; de `gap` van de knop geeft de ruimte. Een bezige knop die
   ook disabled is, oogt niet grijs: hij is niet onbruikbaar, hij is bezig.
   Het JS-deel (attribuut zetten, formulier op slot) is aan de app. */
.ciiic-btn[aria-busy="true"] {
  cursor: progress;
}

.ciiic-btn[aria-busy="true"]:disabled,
.ciiic-btn[aria-busy="true"][disabled] {
  opacity: 1;
}

.ciiic-btn[aria-busy="true"]::before {
  content: '';
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ciiic-spin var(--duration-spinner, 0.8s) linear infinite;
}

@keyframes ciiic-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ciiic-btn {
    transition: none;
  }
  .ciiic-btn:hover {
    transform: none;
  }
  /* Stilstaande, gedimde ring: het signaal blijft, de beweging niet. */
  .ciiic-btn[aria-busy="true"]::before {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }
}

/* ============================================================ */
/* Badges                                                        */
/* ============================================================ */
.ciiic-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.2rem 0.6rem;
  font-family: var(--font-caption, var(--font-mono, monospace));
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

/* Lime accent-badge (de sterkste nadruk, brand-neutraal). */
.ciiic-badge--primary {
  background: var(--color-lime);
  color: var(--color-offblack);
}

/* Neutrale badge — leent currentColor voor rand + tekst, dus theme-neutraal. */
.ciiic-badge--neutral {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
  opacity: 0.8;
}

/* ============================================================ */
/* Form-elementen                                                */
/* ============================================================ */
/* Prioriteit-adopter is forms.ciiic.nl (Gravity Forms). Deze klassen  */
/* zijn de generieke basis; map GF-velden hierop of gebruik ze direct. */

.ciiic-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.ciiic-label {
  font-family: var(--font-heading, var(--font-sans, inherit));
  font-size: var(--text-sm);
  font-weight: 500;
}

.ciiic-input,
.ciiic-select,
.ciiic-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body, var(--font-sans, inherit));
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: currentColor;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
  /* currentColor-rand staat standaard op de tekstkleur; dat is te sterk voor
     een rustveld. De app dimt 'm door op de wrapper een lagere opacity of
     een --ciiic-field-border te zetten; hier houden we 'm neutraal. */
}

.ciiic-textarea {
  min-height: 6rem;
  resize: vertical;
}

.ciiic-input:focus,
.ciiic-select:focus,
.ciiic-textarea:focus {
  outline: none;
  border-color: var(--color-lime);
  box-shadow: 0 0 0 3px var(--color-accent-glow, rgba(219, 255, 0, 0.15));
}

.ciiic-input::placeholder,
.ciiic-textarea::placeholder {
  color: currentColor;
  opacity: 0.5;
}

.ciiic-input:disabled,
.ciiic-select:disabled,
.ciiic-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ciiic-field--error .ciiic-input,
.ciiic-field--error .ciiic-select,
.ciiic-field--error .ciiic-textarea {
  border-color: var(--color-error, #dc2626);
}

.ciiic-field__hint {
  font-size: var(--text-xs);
  opacity: 0.7;
}

.ciiic-field__error {
  font-size: var(--text-xs);
  color: var(--color-error, #dc2626);
}