/* Lush Kingdom — Eden Vol. 3.1 product primitives
   The layer Vol. 03 was missing: everything transactional. Load after
   eden-v3.1-patch.css. Every rule reads the surface contract (--text, --border,
   --surface, --focus), so a primitive works on Teal, Cool Grey, Magenta or a wash
   without a per-surface variant.

   House rules kept: hairline borders, no shadows, radius 3/6/10/pill, mono uppercase
   labels, hover only ever darkens or fades, press is scale(0.97). */

/* ---- Field shell ------------------------------------------------------------------ */
.lk-field { display: flex; flex-direction: column; gap: 8px; }
.lk-field__label {
  font-family: var(--font-mono, 'Spline Sans Mono', monospace);
  font-size: 10.5px; line-height: 1.4; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--text-muted);
}
.lk-field__help { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.lk-field__error {
  font-size: 13px; line-height: 1.5;
  color: var(--state-bad, var(--state-error));
}
.lk-field[data-invalid] .lk-input,
.lk-field[data-invalid] .lk-select,
.lk-field[data-invalid] .lk-textarea { border-color: var(--state-bad, var(--state-error)); }

/* ---- Text input, textarea, select -------------------------------------------------- */
.lk-input, .lk-textarea, .lk-select {
  font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
  font-size: 15.5px; line-height: 1.4;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lk-textarea { min-height: 120px; resize: vertical; }
.lk-input::placeholder, .lk-textarea::placeholder { color: var(--text-disabled); }
.lk-input:hover, .lk-textarea:hover, .lk-select:hover { border-color: var(--text-muted); }
.lk-input:disabled, .lk-textarea:disabled, .lk-select:disabled {
  color: var(--text-disabled); border-color: var(--border); cursor: not-allowed;
}
.lk-select {
  appearance: none;
  padding-right: 38px;
  /* chevron drawn as a border wedge, not an icon — the system has no icon set */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ---- Checkbox and radio ------------------------------------------------------------ */
.lk-check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--text); cursor: pointer; }
.lk-check input { appearance: none; margin: 0; flex: none; width: 18px; height: 18px; border: 1px solid var(--border); background: transparent; cursor: pointer; transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.lk-check input[type="checkbox"] { border-radius: 3px; }
.lk-check input[type="radio"] { border-radius: 999px; }
.lk-check input:hover { border-color: var(--text-muted); }
.lk-check input:checked { background: var(--magenta-600); border-color: var(--magenta-600); }
.lk-check input[type="checkbox"]:checked {
  background-image: linear-gradient(45deg, transparent 44%, var(--grey-50) 44%, var(--grey-50) 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--grey-50) 44%, var(--grey-50) 56%, transparent 56%);
}
.lk-check input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--surface); }
.lk-check input:disabled { border-color: var(--border); background: var(--surface-disabled-on-light); cursor: not-allowed; }

/* ---- Switch ------------------------------------------------------------------------ */
.lk-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.lk-switch input { appearance: none; margin: 0; width: 40px; height: 22px; border-radius: 999px; border: 1px solid var(--border); background: transparent; position: relative; cursor: pointer; transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.lk-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 999px; background: var(--text-muted); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.lk-switch input:checked { background: var(--magenta-600); border-color: var(--magenta-600); }
.lk-switch input:checked::after { transform: translateX(18px); background: var(--grey-50); }

/* ---- Tabs -------------------------------------------------------------------------- */
.lk-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); }
.lk-tab {
  font-family: var(--font-mono, 'Spline Sans Mono', monospace);
  font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--text-muted); background: none; border: 0; cursor: pointer;
  padding: 0 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.lk-tab:hover { color: var(--text); }
.lk-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--magenta-600); }
[data-surface="magenta"] .lk-tab[aria-selected="true"] { border-bottom-color: var(--grey-50); }

/* ---- Table ------------------------------------------------------------------------- */
.lk-table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--text); }
.lk-table th {
  text-align: left; font-family: var(--font-mono, monospace); font-weight: 400;
  font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 16px 10px 0; border-bottom: 1px solid var(--border);
}
.lk-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.lk-table tr:last-child td { border-bottom: 0; }
.lk-table td:last-child, .lk-table th:last-child { padding-right: 0; }
.lk-table--numeric td:last-child, .lk-table--numeric th:last-child { text-align: right; font-family: var(--font-mono, monospace); }

/* ---- Message / toast / inline alert ------------------------------------------------- */
.lk-message {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border-on-light); border-left-width: 1px;
  border-radius: 6px; padding: 14px 16px; font-size: 15px; line-height: 1.55;
  background: var(--surface-light-raised); color: var(--text-on-light);
}
.lk-message__title { font-weight: 600; }
.lk-message[data-tone="success"] { background: var(--state-success-wash); color: var(--state-success); }
.lk-message[data-tone="error"] { background: var(--state-error-wash); color: var(--state-error); }
.lk-message[data-tone="warning"] { background: var(--state-warning-wash); color: var(--state-warning); }
.lk-message[data-tone="info"] { background: var(--state-info-wash); color: var(--state-info); }
.lk-toast { position: fixed; right: 24px; bottom: 24px; max-width: 360px; z-index: 50; }

/* ---- Dialog ------------------------------------------------------------------------ */
.lk-dialog {
  border: 1px solid var(--border-on-light); border-radius: 10px; padding: 32px;
  max-width: 520px; width: calc(100% - 48px);
  background: var(--grey-50); color: var(--teal-900);
}
.lk-dialog::backdrop { background: rgba(7, 47, 42, 0.72); }
.lk-dialog__title { font-family: var(--font-display, 'DM Serif Display', serif); font-size: 28px; line-height: 1.05; margin: 0 0 10px; }
.lk-dialog__body { font-size: 15.5px; line-height: 1.62; color: var(--text-on-light-muted); }
.lk-dialog__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; }

/* ---- Nav and pagination ------------------------------------------------------------- */
.lk-nav { display: flex; gap: 28px; align-items: center; }
.lk-nav a {
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 0.17em;
  text-transform: uppercase; text-decoration: none; color: var(--text-muted);
}
.lk-nav a:hover, .lk-nav a[aria-current] { color: var(--text); }
.lk-pagination { display: flex; gap: 6px; align-items: center; }
.lk-pagination button {
  font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text);
  min-width: 36px; height: 36px; border: 1px solid transparent; border-radius: 6px;
  background: none; cursor: pointer;
}
.lk-pagination button:hover { border-color: var(--border); }
.lk-pagination button[aria-current="page"] { border-color: var(--border); background: var(--surface-raised); }

/* ---- Badge -------------------------------------------------------------------------- */
.lk-badge {
  display: inline-block; font-family: var(--font-mono, monospace); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 12px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted);
}
.lk-badge[data-tone="signature"] { background: var(--magenta-600); border-color: var(--magenta-600); color: var(--grey-50); }
.lk-badge[data-tone="support"] { background: var(--marigold-100); border-color: transparent; color: var(--marigold-800); }

/* ---- Long-form prose ----------------------------------------------------------------- */
.lk-prose { font-size: 15.5px; line-height: 1.62; color: var(--text); max-width: var(--measure); }
.lk-prose h2 { font-family: var(--font-display, serif); font-size: var(--text-section); line-height: 1.05; letter-spacing: -0.005em; margin: 48px 0 16px; }
.lk-prose h3 { font-size: 17px; font-weight: 600; margin: 32px 0 8px; }
.lk-prose p { margin: 0 0 16px; text-wrap: pretty; }
.lk-prose ul, .lk-prose ol { margin: 0 0 16px; padding-left: 20px; }
.lk-prose li { margin-bottom: 6px; }
.lk-prose li::marker { color: var(--text-muted); }
.lk-prose blockquote {
  margin: 24px 0; padding-left: 20px; border-left: 1px solid var(--border);
  font-style: italic; color: var(--text-muted);
}
.lk-prose code { font-family: var(--font-mono, monospace); font-size: 0.9em; }
.lk-prose hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0; }