/* ==========================================================================
 * Kulima Theme — thin, additive helper layer (Phase 18 foundation)
 * --------------------------------------------------------------------------
 * Maps the tokens in kulima-tokens.css onto a small set of OPT-IN utility
 * classes and a few SAFE base-element improvements. This file deliberately
 * does NOT override Bootstrap wholesale: existing pages keep their current
 * look. New work opts in with .kulima-* classes.
 *
 * Load order: AFTER Bootstrap/APEX CSS and AFTER kulima-tokens.css. Keep it
 * small and reversible.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Accessibility: a consistent focus-visible ring (safe + global).
 * Only applies on keyboard focus (:focus-visible), so mouse users are
 * unaffected and nothing existing is restyled destructively. Improves a11y
 * everywhere (WCAG 2.2 SC 2.4.7 / 2.4.11 / 1.4.11) without changing layout.
 * ------------------------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--kulima-color-focus);
  outline-offset: 2px;
  border-radius: var(--kulima-radius-sm);
}

/* --------------------------------------------------------------------------
 * 2. Touch targets for field use. Opt-in only.
 * .kulima-touch guarantees >=44px; .kulima-touch--comfy >=48px.
 * ------------------------------------------------------------------------ */
.kulima-touch {
  min-height: var(--kulima-touch-target-min);
  min-width: var(--kulima-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kulima-touch--comfy {
  min-height: var(--kulima-touch-target-comfy);
  min-width: var(--kulima-touch-target-comfy);
}

/* --------------------------------------------------------------------------
 * 3. Surface + text helpers (scope token colours onto a container).
 * .kulima-surface turns any region into a Kulima-themed, dark-mode-aware
 * surface. Useful for new panels and for previewing dark mode.
 * ------------------------------------------------------------------------ */
.kulima-surface {
  background-color: var(--kulima-color-surface);
  color: var(--kulima-color-text);
}
.kulima-surface--raised { background-color: var(--kulima-color-surface-raised); }
.kulima-surface--sunken { background-color: var(--kulima-color-surface-sunken); }

.kulima-text        { color: var(--kulima-color-text); }
.kulima-text-muted  { color: var(--kulima-color-text-muted); }
.kulima-heading {
  font-family: var(--kulima-font-heading);
  font-weight: var(--kulima-font-weight-bold);
  line-height: var(--kulima-line-height-heading);
  letter-spacing: var(--kulima-tracking-heading);
  color: var(--kulima-color-text);
}
.kulima-body {
  font-family: var(--kulima-font-body);
  font-size: var(--kulima-font-size-base);
  line-height: var(--kulima-line-height-body);
  color: var(--kulima-color-text);
}
.kulima-label {
  text-transform: uppercase;
  letter-spacing: var(--kulima-tracking-label);
  font-size: var(--kulima-font-size-xs);
  font-weight: var(--kulima-font-weight-semibold);
  color: var(--kulima-color-text-muted);
}

/* --------------------------------------------------------------------------
 * 4. Buttons — Kulima accents (opt-in: .kulima-btn + variant).
 * Pairs cleanly with Bootstrap's .btn sizing without requiring it.
 * ------------------------------------------------------------------------ */
.kulima-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kulima-space-2);
  min-height: var(--kulima-touch-target-min);
  padding: var(--kulima-space-2) var(--kulima-space-4);
  font-family: var(--kulima-font-heading);
  font-weight: var(--kulima-font-weight-semibold);
  font-size: var(--kulima-font-size-sm);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--kulima-radius-md);
  cursor: pointer;
  transition: background-color var(--kulima-motion-base) var(--kulima-easing-standard),
              border-color var(--kulima-motion-base) var(--kulima-easing-standard),
              color var(--kulima-motion-base) var(--kulima-easing-standard);
}
.kulima-btn:disabled,
.kulima-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}
.kulima-btn--primary {
  background-color: var(--kulima-color-primary);
  color: var(--kulima-color-on-primary);
}
.kulima-btn--primary:hover { background-color: var(--kulima-color-primary-hover); }

.kulima-btn--secondary {
  background-color: var(--kulima-color-secondary);
  color: var(--kulima-color-on-secondary);
}
.kulima-btn--secondary:hover { background-color: var(--kulima-color-secondary-hover); }

.kulima-btn--outline {
  background-color: transparent;
  color: var(--kulima-color-primary);
  border-color: var(--kulima-color-primary);
}
.kulima-btn--outline:hover {
  background-color: var(--kulima-color-primary-subtle);
}

/* --------------------------------------------------------------------------
 * 5. Cards & panels (opt-in).
 * ------------------------------------------------------------------------ */
.kulima-card {
  background-color: var(--kulima-color-surface-raised);
  color: var(--kulima-color-text);
  border: 1px solid var(--kulima-color-border);
  border-radius: var(--kulima-radius-lg);
  box-shadow: var(--kulima-shadow-sm);
  padding: var(--kulima-space-5);
}

/* --------------------------------------------------------------------------
 * 6. Badges (opt-in) — state carried by text + shape, not colour alone
 * (WCAG 1.4.1). The label text names the state; colour reinforces it.
 * ------------------------------------------------------------------------ */
.kulima-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--kulima-space-1);
  padding: var(--kulima-space-1) var(--kulima-space-3);
  font-size: var(--kulima-font-size-xs);
  font-weight: var(--kulima-font-weight-semibold);
  line-height: 1.2;
  border-radius: var(--kulima-radius-pill);
  border: 1px solid transparent;
}
.kulima-badge--success { background: var(--kulima-color-success-subtle); color: var(--kulima-green-800); border-color: var(--kulima-color-success); }
.kulima-badge--warning { background: var(--kulima-color-warning-subtle); color: var(--kulima-amber-900); border-color: var(--kulima-color-warning); }
.kulima-badge--danger  { background: var(--kulima-color-danger-subtle);  color: var(--kulima-red-700);   border-color: var(--kulima-color-danger); }
.kulima-badge--info    { background: var(--kulima-color-info-subtle);    color: var(--kulima-blue-700);  border-color: var(--kulima-color-info); }

/* In dark mode the subtle backgrounds are dark; flip badge text to a light tone. */
[data-theme="dark"] .kulima-badge--success,
[data-theme="dark"] .kulima-badge--warning,
[data-theme="dark"] .kulima-badge--danger,
[data-theme="dark"] .kulima-badge--info {
  color: var(--kulima-neutral-50);
}

/* --------------------------------------------------------------------------
 * 7. Links (opt-in via .kulima-link; does not restyle global <a>).
 * ------------------------------------------------------------------------ */
.kulima-link {
  color: var(--kulima-color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.kulima-link:hover { color: var(--kulima-color-link-hover); }

/* --------------------------------------------------------------------------
 * 8. Spacing / rhythm helpers on the 8pt grid (opt-in, scoped names so they
 * never collide with Bootstrap's m-*/p-* utilities).
 * ------------------------------------------------------------------------ */
.kulima-stack > * + * { margin-top: var(--kulima-space-4); }
.kulima-stack--tight > * + * { margin-top: var(--kulima-space-2); }
.kulima-stack--loose > * + * { margin-top: var(--kulima-space-6); }

/* --------------------------------------------------------------------------
 * 9. Motion preference — honour Reduce Motion for Kulima transitions.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .kulima-btn,
  [class^="kulima-"],
  [class*=" kulima-"] {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
 * 10. Equal-height cards in a .row.match-height (replaces jquery.matchHeight,
 * which writes style="" attributes that the CSP blocks; Phase 18). Bootstrap
 * rows are already flex, so each column stretches; the card fills its column.
 * ------------------------------------------------------------------------ */
.row.match-height > [class*="col"] {
  display: flex;
  flex-direction: column;
}
.row.match-height > [class*="col"] > .card {
  flex: 1 1 auto;
}