/* ============================================================
   Kidora Component Primitives — design refresh, May 2026
   ------------------------------------------------------------
   All classes here are driven exclusively by kidora-tokens.css
   variables. Theme switches (data-design="storybook"|"sunny")
   propagate automatically — no per-component theme code.

   Naming: `kk-*` prefix to avoid colliding with the legacy
   `.k-*` system already wired into 6,983 lines of index.html.
   The legacy primitives stay live until each surface is
   migrated screen-by-screen in later phases.

   Sections:
     1. Reset / base typography
     2. Type scale helpers
     3. Buttons (.kk-btn, .kk-btn-primary, .kk-btn-ghost)
     4. Tiles & icon containers (.kk-tile)
     5. Pills & badges (.kk-pill, .kk-caption)
     6. Cards & surfaces (.kk-card)
     7. Inputs (.kk-input)
     8. Tabs (.kk-tabs, .kk-tab)
     9. 3-state checkbox (.kk-check)
    10. Progress bar (.kk-progress)
    11. Donut / score ring (.kk-donut, .kk-ring)
    12. Chat bubbles (.kk-bubble)
    13. Layout utilities (.kk-stack, .kk-row, .kk-section)
   ============================================================ */

/* 1. Base */
.kk { font-family: var(--k-font-sans); color: var(--k-ink); }

/* 2. Type scale — matches handoff README "Type scale" table */
.kk-display  { font-family: var(--k-font-display); font-size: 52px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--k-ink); }
.kk-headline { font-family: var(--k-font-display); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--k-ink); }
.kk-title    { font-family: var(--k-font-display); font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--k-ink); }
.kk-subtitle { font-family: var(--k-font-sans);    font-size: 17px; font-weight: 600; line-height: 1.4;  color: var(--k-ink); }
.kk-body     { font-family: var(--k-font-sans);    font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--k-ink-soft); }
.kk-small    { font-family: var(--k-font-sans);    font-size: 13px; font-weight: 400; line-height: 1.5;  color: var(--k-ink-soft); }
.kk-caption  { font-family: var(--k-font-sans);    font-size: 11px; font-weight: 800; line-height: 1.4;  letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-ink-muted); }

/* Tonal caption variants — pair caption with intent color */
.kk-caption[data-tone="coral"]    { color: var(--k-coral); }
.kk-caption[data-tone="sunshine"] { color: var(--k-warn); }
.kk-caption[data-tone="sage"]     { color: var(--k-good); }
.kk-caption[data-tone="sky"]      { color: var(--k-sky); }
.kk-caption[data-tone="plum"]     { color: var(--k-plum); }
.kk-caption[data-tone="bad"]      { color: var(--k-bad); }

/* 3. Buttons */
.kk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: var(--k-r-md);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--k-font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--k-ink);
  cursor: pointer;
  transition: filter var(--k-dur-fast) var(--k-ease),
              transform var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease),
              background var(--k-dur-fast) var(--k-ease);
  user-select: none;
}
.kk-btn:hover { filter: brightness(1.05); }
.kk-btn:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }
.kk-btn[disabled] { opacity: 0.55; cursor: not-allowed; filter: none; }

/* Primary — coral or sky depending on active theme. 4px solid drop
   shadow at rest gives the "press me" physicality the handoff calls out. */
.kk-btn-primary {
  background: var(--k-primary);
  color: var(--k-primary-ink);
  border-color: transparent;
  box-shadow: 0 4px 0 rgba(23, 34, 56, 0.18);
}
.kk-btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(23, 34, 56, 0.18);
}

/* Ghost — outlined surface button */
.kk-btn-ghost {
  background: var(--k-surface);
  color: var(--k-ink);
  border-color: var(--k-line-strong);
}
.kk-btn-ghost:hover { background: var(--k-bg-alt); filter: none; }

/* Tonal accent variants (for Compliance "Do it", drill buttons, etc.) */
.kk-btn-coral    { background: var(--k-coral);    color: var(--k-ink-on-color); }
.kk-btn-sky      { background: var(--k-sky);      color: var(--k-ink-on-color); }
.kk-btn-sage     { background: var(--k-sage);     color: var(--k-ink-on-color); }
.kk-btn-sunshine { background: var(--k-sunshine); color: var(--k-ink); }

/* Size modifiers */
.kk-btn-sm { min-height: 36px; padding: 8px 14px; font-size: 13px; border-radius: var(--k-r-sm); }
.kk-btn-lg { min-height: 56px; padding: 16px 22px; font-size: 16px; border-radius: var(--k-r-lg); }
.kk-btn-icon { width: 44px; min-width: 44px; padding: 0; }

/* 4. Icon tiles — colored rounded squares behind icons */
.kk-tile {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--k-r-sm);
  background: var(--k-bg-alt);
  color: var(--k-ink);
  flex-shrink: 0;
}
.kk-tile-24 { width: 24px; height: 24px; border-radius: 7px; }
.kk-tile-32 { width: 32px; height: 32px; }
.kk-tile-44 { width: 44px; height: 44px; }
.kk-tile-48 { width: 48px; height: 48px; border-radius: var(--k-r-md); }
.kk-tile-64 { width: 64px; height: 64px; border-radius: var(--k-r-md); }
.kk-tile-96 { width: 96px; height: 96px; border-radius: var(--k-r-lg); }

/* Tonal tiles — pair tile with intent color (soft bg + hard fg) */
.kk-tile[data-tone="coral"]    { background: var(--k-coral-soft);    color: var(--k-coral); }
.kk-tile[data-tone="sunshine"] { background: var(--k-sunshine-soft); color: var(--k-warn); }
.kk-tile[data-tone="sage"]     { background: var(--k-sage-soft);     color: var(--k-sage); }
.kk-tile[data-tone="sky"]      { background: var(--k-sky-soft);      color: var(--k-sky); }
.kk-tile[data-tone="plum"]     { background: var(--k-plum-soft);     color: var(--k-plum); }
.kk-tile[data-tone="good"]     { background: var(--k-good-soft);     color: var(--k-good); }
.kk-tile[data-tone="warn"]     { background: var(--k-warn-soft);     color: var(--k-warn); }
.kk-tile[data-tone="bad"]      { background: var(--k-bad-soft);      color: var(--k-bad); }

/* Solid tile variant — colored bg with on-color text */
.kk-tile-solid[data-tone="coral"]    { background: var(--k-coral);    color: var(--k-ink-on-color); }
.kk-tile-solid[data-tone="sky"]      { background: var(--k-sky);      color: var(--k-ink-on-color); }
.kk-tile-solid[data-tone="sage"]     { background: var(--k-sage);     color: var(--k-ink-on-color); }
.kk-tile-solid[data-tone="sunshine"] { background: var(--k-sunshine); color: var(--k-ink); }
.kk-tile-solid[data-tone="plum"]     { background: var(--k-plum);     color: var(--k-ink-on-color); }

/* 5. Pills & badges */
.kk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--k-r-pill);
  background: var(--k-bg-alt);
  color: var(--k-ink-soft);
  font-family: var(--k-font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Pills: tinted bg + ink text. WCAG AA at 11px/800. The bg color carries the
   tone signal; text uses --k-ink to stay legible (the accent-on-soft pairings
   failed contrast — warn was 1.9:1, sunshine 2.1:1). */
.kk-pill[data-tone="coral"]    { background: var(--k-coral-soft);    color: var(--k-ink); }
.kk-pill[data-tone="sunshine"] { background: var(--k-sunshine-soft); color: var(--k-ink); }
.kk-pill[data-tone="sage"]     { background: var(--k-sage-soft);     color: var(--k-ink); }
.kk-pill[data-tone="sky"]      { background: var(--k-sky-soft);      color: var(--k-ink); }
.kk-pill[data-tone="good"]     { background: var(--k-good-soft);     color: var(--k-ink); }
.kk-pill[data-tone="warn"]     { background: var(--k-warn-soft);     color: var(--k-ink); }
.kk-pill[data-tone="bad"]      { background: var(--k-bad-soft);      color: var(--k-ink); }

/* 6. Cards & surfaces */
.kk-card {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  box-shadow: var(--k-shadow-sm);
  padding: 20px;
  color: var(--k-ink);
}
.kk-card-hero {
  border-radius: var(--k-r-xl);
  padding: 28px;
  box-shadow: var(--k-shadow);
}
.kk-card-tint {
  background: var(--k-surface-tint);
}

/* 7. Inputs */
.kk-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  min-height: 44px;
  background: var(--k-surface);
  border: 2px solid var(--k-line-strong);
  border-radius: var(--k-r-md);
  font-family: var(--k-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--k-ink);
  transition: border-color var(--k-dur-fast) var(--k-ease),
              box-shadow var(--k-dur-fast) var(--k-ease);
}
.kk-input::placeholder { color: var(--k-ink-muted); }
.kk-input:focus {
  outline: none;
  border-color: var(--k-primary);
  box-shadow: 0 0 0 4px var(--k-primary-soft);
}
.kk-input[disabled] { opacity: 0.55; cursor: not-allowed; }

.kk-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--k-ink);
}

/* 8. Tabs — pill style */
.kk-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--k-bg-alt);
  border-radius: var(--k-r-pill);
}
.kk-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  min-height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--k-r-pill);
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--k-ink-soft);
  cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease),
              color var(--k-dur-fast) var(--k-ease);
}
.kk-tab[aria-selected="true"], .kk-tab.is-active {
  background: var(--k-surface);
  border-color: var(--k-line-strong);
  color: var(--k-coral);
  box-shadow: var(--k-shadow-sm);
}
.kk-tab:hover:not([aria-selected="true"]) { color: var(--k-ink); }

/* 9. 3-state checkbox — open / pending / done.
   Visual stays 22px to match handoff; a pseudo-element overlay expands the
   tap target to 44×44 for WCAG touch compliance without affecting layout. */
.kk-check {
  --kk-check-size: 22px;
  display: inline-grid;
  place-items: center;
  width: var(--kk-check-size);
  height: var(--kk-check-size);
  border-radius: 7px;
  background: transparent;
  border: 2px solid var(--k-line-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease);
  position: relative;
}
.kk-check::before {
  /* Transparent 44×44 hit zone overlay — invisible, makes the tiny visual
     checkbox tap-friendly. Sits behind the visual via z-index so it doesn't
     intercept the ::after check mark. */
  content: "";
  position: absolute;
  inset: -11px;
  z-index: -1;
}
.kk-check[data-state="pending"] {
  border-color: var(--k-warn);
}
.kk-check[data-state="pending"]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--k-warn);
}
.kk-check[data-state="done"] {
  background: var(--k-good);
  border-color: var(--k-good);
}
.kk-check[data-state="done"]::after {
  content: "";
  width: 12px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* 10. Progress bar */
.kk-progress {
  position: relative;
  width: 100%;
  height: 10px;
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-pill);
  overflow: hidden;
}
.kk-progress__fill {
  display: block;
  height: 100%;
  width: var(--kk-progress-value, 0%);
  background: linear-gradient(90deg, var(--k-coral), var(--k-sunshine));
  border-radius: var(--k-r-pill);
  transition: width var(--k-dur-slow) var(--k-ease);
}

/* 11. Donut / ring — conic-gradient compliance score visual */
.kk-donut {
  --kk-donut-size: 48px;
  --kk-donut-thickness: 0.18;  /* fraction of size */
  --kk-donut-value: 0;          /* 0..1 */
  --kk-donut-color: var(--k-good);
  width: var(--kk-donut-size);
  height: var(--kk-donut-size);
  border-radius: 50%;
  background:
    conic-gradient(
      var(--kk-donut-color) calc(var(--kk-donut-value) * 360deg),
      var(--k-bg-alt) 0
    );
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}
.kk-donut::after {
  content: "";
  position: absolute;
  inset: calc(var(--kk-donut-size) * var(--kk-donut-thickness));
  background: var(--k-surface);
  border-radius: 50%;
}
.kk-donut__label {
  position: relative;
  z-index: 1;
  font-family: var(--k-font-sans);
  font-weight: 800;
  font-size: calc(var(--kk-donut-size) * 0.28);
  color: var(--k-ink);
}

/* Big ring (compliance hero) — same visual, bigger sizing defaults
   and an outer drop shadow that lifts it off the panel. */
.kk-ring {
  --kk-ring-size: 220px;
  --kk-ring-value: 0;            /* 0..1 */
  --kk-ring-color: var(--k-bad);
  --kk-ring-track: var(--k-coral-soft);
  --kk-ring-thickness: 0.075;
  width: var(--kk-ring-size);
  height: var(--kk-ring-size);
  border-radius: 50%;
  background:
    conic-gradient(
      var(--kk-ring-color) calc(var(--kk-ring-value) * 360deg),
      var(--kk-ring-track) 0
    );
  display: grid;
  place-items: center;
  position: relative;
  filter: drop-shadow(0 6px 18px rgba(229, 86, 74, 0.13));
}
.kk-ring::after {
  content: "";
  position: absolute;
  inset: calc(var(--kk-ring-size) * var(--kk-ring-thickness));
  background: var(--k-surface);
  border-radius: 50%;
}
.kk-ring__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.kk-ring__letter {
  font-family: var(--k-font-display);
  font-size: calc(var(--kk-ring-size) * 0.46);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--kk-ring-color);
}
.kk-ring__num {
  font-size: 28px;
  font-weight: 700;
  color: var(--k-ink);
}
.kk-ring__num--muted { color: var(--k-ink-muted); }

/* 12. Chat bubbles */
.kk-bubble {
  display: inline-block;
  padding: 16px 18px;
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  border-top-left-radius: 6px;
  box-shadow: var(--k-shadow-sm);
  font-family: var(--k-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--k-ink);
  max-width: 78%;
}
.kk-bubble--user {
  background: var(--k-sky);
  color: var(--k-ink-on-color);
  border-color: transparent;
  border-top-left-radius: var(--k-r-lg);
  border-top-right-radius: 6px;
}

/* 13. Layout utilities */
.kk-stack { display: flex; flex-direction: column; gap: 12px; }
.kk-stack-sm { gap: 6px; }
.kk-stack-lg { gap: 24px; }
.kk-row { display: flex; align-items: center; gap: 12px; }
.kk-row-between { justify-content: space-between; }
.kk-section { padding: 24px 28px; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .kk-btn, .kk-input, .kk-check, .kk-progress__fill, .kk-tab {
    transition: none;
  }
}