:root {
  color-scheme: light;
  --kl-navy-950: #050c16;
  --kl-navy-900: #081525;
  --kl-navy-800: #10233a;
  --kl-navy-700: #19344f;
  --kl-turquoise-600: #079d9d;
  --kl-turquoise-500: #15c7c3;
  --kl-turquoise-400: #43e2dc;
  --kl-turquoise-100: #dffaf8;
  --kl-gold-500: #c7a15a;
  --kl-gold-300: #e6cc95;
  --kl-paper: #fffdf8;
  --kl-white: #ffffff;
  --kl-surface: #f6f8fb;
  --kl-surface-2: #eef3f7;
  --kl-text: #15263a;
  --kl-muted: #637287;
  --kl-border: #dce4ec;
  --kl-danger: #b42318;
  --kl-success: #087d69;
  --kl-radius-sm: 10px;
  --kl-radius-md: 16px;
  --kl-radius-lg: 24px;
  --kl-radius-xl: 32px;
  --kl-shadow-sm: 0 7px 24px rgba(8, 25, 43, .08);
  --kl-shadow-md: 0 18px 54px rgba(8, 25, 43, .14);
  --kl-shadow-lg: 0 34px 90px rgba(3, 15, 27, .24);
  --kl-focus: 0 0 0 4px rgba(21, 199, 195, .25);
  --kl-space-1: 4px;
  --kl-space-2: 8px;
  --kl-space-3: 12px;
  --kl-space-4: 16px;
  --kl-space-5: 24px;
  --kl-space-6: 32px;
  --kl-space-7: 48px;
  --kl-space-8: 72px;
  --kl-transition: 200ms cubic-bezier(.2, .8, .2, 1);
  --ink: var(--kl-navy-950);
  --ink-2: var(--kl-navy-800);
  --aqua: var(--kl-turquoise-400);
  --aqua-soft: #aafcf7;
  --muted: var(--kl-muted);
  --line: var(--kl-border);
  --danger: var(--kl-danger);
}

html { scroll-padding-top: 108px; }

body {
  color: var(--kl-text);
  font-family: Heebo, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }

:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--kl-turquoise-400);
  outline-offset: 3px;
  box-shadow: var(--kl-focus);
}

.primary-button,
.secondary-action-button,
.hero-secondary-button,
.section-action {
  min-height: 48px;
  border-radius: var(--kl-radius-md);
  font-weight: 800;
  transition: transform var(--kl-transition), box-shadow var(--kl-transition), background-color var(--kl-transition), border-color var(--kl-transition), color var(--kl-transition), opacity var(--kl-transition);
}

.primary-button {
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(135deg, var(--kl-turquoise-500), #74eee7);
  box-shadow: 0 12px 28px rgba(4, 163, 161, .25), inset 0 1px rgba(255, 255, 255, .5);
  color: #03232c;
}

.primary-button:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(4, 163, 161, .3), inset 0 1px rgba(255, 255, 255, .55); }
.primary-button:active { transform: translateY(0); }
.primary-button:disabled { cursor: wait; opacity: .58; transform: none; }

.content-card,
.modal-box {
  border: 1px solid rgba(220, 228, 236, .9);
  background: rgba(255, 255, 255, .985);
  box-shadow: var(--kl-shadow-lg);
}

.field input,
.field textarea,
.field select,
select {
  border-color: var(--kl-border);
  background: var(--kl-white);
  color: var(--kl-text);
  transition: border-color var(--kl-transition), box-shadow var(--kl-transition), background-color var(--kl-transition);
}

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: #b8c7d5; }

.field input:focus,
.field textarea:focus,
.field select:focus,
select:focus { border-color: var(--kl-turquoise-600); box-shadow: var(--kl-focus); }

.toast { border-radius: var(--kl-radius-md); box-shadow: var(--kl-shadow-md); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}