/* CSS variables (--ks-*) are injected dynamically by ThemeHelper from the themes table */

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--ks-font-sans);
  background-color: var(--ks-neutral);
  color: var(--ks-on-surface);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ks-font-display);
  color: var(--ks-on-surface);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p { color: var(--ks-on-surface); opacity: 0.85; }

a { color: inherit; }

*:focus-visible { outline: 2px solid var(--ks-secondary); outline-offset: 2px; }

.bg-white { background-color: var(--ks-surface) !important; }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9) !important; }
.bg-stone-50 { background-color: var(--ks-neutral) !important; }
.bg-stone-100 { background-color: var(--ks-neutral) !important; }
.bg-stone-200 { background-color: var(--ks-muted) !important; }
.bg-stone-700 { background-color: var(--ks-primary) !important; }
.bg-stone-800 { background-color: var(--ks-primary) !important; }
.bg-stone-900 { background-color: var(--ks-primary) !important; }
.hover\:bg-stone-900:hover { background-color: var(--ks-secondary) !important; }
.hover\:bg-stone-100:hover { background-color: var(--ks-muted) !important; }
.hover\:bg-stone-200:hover { background-color: var(--ks-border) !important; }

.bg-emerald-500 { background-color: var(--ks-primary) !important; }
.bg-emerald-600 { background-color: var(--ks-primary) !important; }
.bg-emerald-700 { background-color: var(--ks-primary) !important; }
.hover\:bg-emerald-600:hover { background-color: var(--ks-secondary) !important; }
.hover\:bg-emerald-700:hover { background-color: var(--ks-secondary) !important; }

.text-emerald-500 { color: var(--ks-secondary) !important; }
.text-emerald-600 { color: var(--ks-secondary) !important; }
.text-emerald-700 { color: var(--ks-success) !important; }
.hover\:text-emerald-600:hover { color: var(--ks-secondary) !important; }

.bg-emerald-50 { background-color: var(--ks-muted) !important; }
.bg-emerald-100 { background-color: var(--ks-muted) !important; }
.text-emerald-300 { color: var(--ks-muted) !important; }

.bg-green-50 { background-color: var(--ks-accent-lime) !important; }
.text-green-700 { color: var(--ks-success) !important; }
.text-green-600 { color: var(--ks-success) !important; }

.bg-amber-50 { background-color: var(--ks-accent-warm) !important; }
.text-amber-700 { color: var(--ks-on-surface) !important; }

.bg-red-50 { background-color: rgba(123, 32, 29, 0.1) !important; }
.text-red-700 { color: var(--ks-error) !important; }
.text-red-600 { color: var(--ks-error) !important; }
.hover\:text-red-600:hover { color: var(--ks-error) !important; }
.hover\:bg-red-50:hover { background-color: rgba(123, 32, 29, 0.1) !important; }

.text-stone-900 { color: var(--ks-on-surface) !important; }
.text-stone-800 { color: var(--ks-on-surface) !important; }
.text-stone-700 { color: var(--ks-on-surface) !important; }
.text-stone-600 { color: var(--ks-on-surface) !important; opacity: 0.85 !important; }
.hover\:text-stone-800:hover { color: var(--ks-on-surface) !important; }
.hover\:text-stone-600:hover { color: var(--ks-on-surface) !important; opacity: 0.85 !important; }
.text-stone-500 { color: var(--ks-on-surface) !important; opacity: 0.65 !important; }
.text-stone-400 { color: var(--ks-on-surface) !important; opacity: 0.55 !important; }
.text-stone-300 { color: var(--ks-on-surface) !important; opacity: 0.45 !important; }
.text-stone-200 { color: var(--ks-on-surface) !important; opacity: 0.35 !important; }
.text-stone-100 { color: var(--ks-on-surface) !important; opacity: 0.25 !important; }
.text-white { color: var(--ks-neutral) !important; }

.border-stone-100 { border-color: var(--ks-border) !important; }
.border-stone-200 { border-color: var(--ks-border) !important; }
.border-stone-800 { border-color: rgba(14, 15, 10, 0.3) !important; }
.border-emerald-500 { border-color: var(--ks-secondary) !important; }
.border-emerald-600 { border-color: var(--ks-secondary) !important; }
.divide-stone-100 > * + * { border-color: var(--ks-border) !important; }

.focus\:ring-emerald-500:focus { --tw-ring-color: var(--ks-secondary) !important; }
.ring-emerald-500 { --tw-ring-color: var(--ks-secondary) !important; }

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow-emerald-500\/20,
.hover\:shadow-md:hover,
.hover\:shadow-lg:hover,
.hover\:shadow-xl:hover {
  --tw-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}

.rounded-2xl { border-radius: 8px !important; }
.rounded-xl { border-radius: 8px !important; }

a.rounded-xl,
button.rounded-xl,
a.rounded-full,
button.rounded-full { border-radius: 4px !important; }

input.rounded-xl,
select.rounded-xl,
textarea.rounded-xl,
input.rounded-sm,
select.rounded-sm,
textarea.rounded-sm { border-radius: 4px !important; }

.ks-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background-color: var(--ks-primary); color: var(--ks-neutral);
  font-family: var(--ks-font-display); font-size: 16px; font-weight: 400; line-height: 1.2;
  border-radius: 4px; padding: 8px 16px; min-height: 40px;
  text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease;
}
.ks-btn-primary:hover { background-color: var(--ks-secondary); color: var(--ks-surface); }

.ks-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background-color: transparent; color: var(--ks-primary); border: 1px solid var(--ks-primary);
  font-family: var(--ks-font-display); font-size: 16px; font-weight: 400; line-height: 1.2;
  border-radius: 4px; padding: 8px 16px; min-height: 40px;
  text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease;
}
.ks-btn-secondary:hover { background-color: var(--ks-primary); color: var(--ks-neutral); }

.ks-btn-tertiary {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background-color: transparent; color: var(--ks-primary);
  font-family: var(--ks-font-display); font-size: 14px; font-weight: 400; line-height: 1.2;
  padding: 0; min-height: auto; text-decoration: none; transition: color 0.2s ease;
}
.ks-btn-tertiary:hover { color: var(--ks-secondary); text-decoration: underline; }

.ks-card {
  background-color: var(--ks-surface); color: var(--ks-on-surface);
  border: 1px solid var(--ks-border); border-radius: 8px; padding: 16px;
}
.ks-card-soft {
  background-color: var(--ks-neutral); color: var(--ks-on-surface);
  border-radius: 8px; padding: 16px;
}

.ks-input {
  display: block; width: 100%; background-color: var(--ks-surface); color: var(--ks-on-surface);
  border: 1px solid var(--ks-border); border-radius: 4px; padding: 8px 12px; min-height: 40px;
  font-family: var(--ks-font-sans); font-size: 16px; line-height: 1.5; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ks-input:focus { border-color: var(--ks-secondary); box-shadow: 0 0 0 2px var(--ks-secondary); }

.ks-chip {
  display: inline-flex; align-items: center; background-color: var(--ks-neutral); color: var(--ks-on-surface);
  font-family: var(--ks-font-display); font-size: 12px; font-weight: 500; line-height: 1.15; letter-spacing: 0.04em;
  border-radius: 9999px; padding: 4px 10px;
}

.ks-banner {
  background-color: var(--ks-accent-warm); color: var(--ks-on-surface);
  font-family: var(--ks-font-display); font-size: 14px; line-height: 1.2; padding: 12px 16px;
}

.ks-label {
  display: block; font-family: var(--ks-font-display); font-size: 14px; font-weight: 500;
  color: var(--ks-on-surface); margin-bottom: 4px;
}

.ks-table { width: 100%; border-collapse: collapse; text-align: left; }
.ks-table thead { background-color: var(--ks-muted); }
.ks-table th {
  padding: 12px 24px; font-family: var(--ks-font-display); font-size: 14px; font-weight: 500; color: var(--ks-on-surface);
}
.ks-table td { padding: 16px 24px; font-size: 14px; color: var(--ks-on-surface); }
.ks-table tbody tr { border-top: 1px solid var(--ks-border); }
.ks-table tbody tr:hover { background-color: var(--ks-neutral); }

.ks-hero { background-color: var(--ks-primary); color: var(--ks-neutral); }
.ks-hero h1, .ks-hero h2, .ks-hero p { color: var(--ks-neutral); }
.ks-hero .ks-btn-primary { background-color: var(--ks-tertiary); color: var(--ks-primary); }
.ks-hero .ks-btn-primary:hover { background-color: var(--ks-secondary); color: var(--ks-surface); }
.ks-cta-warm { background-color: var(--ks-accent-warm); color: var(--ks-on-surface); }
.ks-cta-lime { background-color: var(--ks-tertiary); color: var(--ks-on-surface); }
.ks-cta-warm .ks-btn-primary, .ks-cta-lime .ks-btn-primary { background-color: var(--ks-primary); color: var(--ks-neutral); }