:root {
  /* Brand */
  --lh-primary: #1763D8;
  --lh-primary-hover: #0F55C5;
  --lh-primary-active: #0B49AC;
  --lh-primary-soft: #EAF2FF;
  --lh-primary-dark: #082B5E;

  /* Authentication */
  --lh-auth-main: #FFFFFF;
  --lh-auth-side: #0C1730;
  --lh-auth-side-text: #FFFFFF;
  --lh-auth-side-muted: #D5DEEC;
  --lh-auth-side-subtle: #9EABC0;

  /* Text */
  --lh-text: #202630;
  --lh-text-secondary: #6C7785;
  --lh-text-muted: #8B95A1;
  --lh-text-on-primary: #FFFFFF;

  /* Surfaces */
  --lh-bg: #F7F8FA;
  --lh-surface: #FFFFFF;
  --lh-surface-soft: #F5F7FB;
  --lh-surface-hover: #F0F3F7;

  /* Borders */
  --lh-border: #DDE4ED;
  --lh-border-light: #E9EDF2;
  --lh-border-strong: #C7D0DC;

  /* Status */
  --lh-success: #16865C;
  --lh-success-soft: #EAF7F1;
  --lh-warning: #B7791F;
  --lh-warning-soft: #FFF7E6;
  --lh-danger: #D92D20;
  --lh-danger-soft: #FEEDEC;

  /* Typography */
  --lh-font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lh-font-size-xs: 12px;
  --lh-font-size-sm: 14px;
  --lh-font-size-md: 15px;
  --lh-font-size-lg: 18px;
  --lh-font-size-xl: 24px;
  --lh-font-size-2xl: 30px;

  /* Layout */
  --lh-container: 1240px;
  --lh-page-gutter: 18px;
  --lh-page-gutter-mobile: 10px;

  /* Radius */
  --lh-radius-xs: 6px;
  --lh-radius-sm: 8px;
  --lh-radius-md: 12px;
  --lh-radius-lg: 16px;
  --lh-radius-xl: 20px;
  --lh-radius-pill: 999px;

  /* Spacing */
  --lh-space-1: 4px;
  --lh-space-2: 8px;
  --lh-space-3: 12px;
  --lh-space-4: 16px;
  --lh-space-5: 20px;
  --lh-space-6: 24px;
  --lh-space-8: 32px;
  --lh-space-10: 40px;
  --lh-space-12: 48px;
  --lh-space-16: 64px;

  /* Shadows */
  --lh-shadow-card: 0 8px 24px rgba(20, 40, 70, 0.06);
  --lh-shadow-floating: 0 16px 40px rgba(20, 40, 70, 0.10);

  /* Motion */
  --lh-transition-fast: 140ms ease;
  --lh-transition: 200ms ease;
}

/* Bricks-ready global utility classes. Keep actual values in tokens above. */
.lh-container {
  width: min(var(--lh-container), calc(100% - (var(--lh-page-gutter) * 2)));
  margin-inline: auto;
}

.lh-section {
  padding-block: var(--lh-space-16);
}

.lh-surface,
.lh-card {
  background: var(--lh-surface);
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius-lg);
  box-shadow: var(--lh-shadow-card);
}

.lh-button-primary,
.lh-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lh-space-2);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--lh-radius-md);
  font-family: var(--lh-font-family);
  font-size: var(--lh-font-size-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--lh-transition-fast), border-color var(--lh-transition-fast), color var(--lh-transition-fast), transform var(--lh-transition-fast);
}

.lh-button-primary {
  border: 1px solid var(--lh-primary);
  background: var(--lh-primary);
  color: var(--lh-text-on-primary);
}

.lh-button-primary:hover {
  border-color: var(--lh-primary-hover);
  background: var(--lh-primary-hover);
  color: var(--lh-text-on-primary);
}

.lh-button-primary:active {
  border-color: var(--lh-primary-active);
  background: var(--lh-primary-active);
  transform: translateY(1px);
}

.lh-button-secondary {
  border: 1px solid var(--lh-border);
  background: var(--lh-surface);
  color: var(--lh-text);
}

.lh-button-secondary:hover {
  border-color: var(--lh-border-strong);
  background: var(--lh-surface-hover);
  color: var(--lh-text);
}

.lh-input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius-md);
  background: var(--lh-surface);
  color: var(--lh-text);
  font-family: var(--lh-font-family);
  font-size: var(--lh-font-size-sm);
  outline: none;
  transition: border-color var(--lh-transition-fast), box-shadow var(--lh-transition-fast);
}

textarea.lh-input {
  min-height: 120px;
  padding-block: 12px;
  resize: vertical;
}

.lh-input:focus {
  border-color: var(--lh-primary);
  box-shadow: 0 0 0 3px rgba(23, 99, 216, 0.10);
}

.lh-heading-xl {
  margin: 0;
  color: var(--lh-text);
  font-family: var(--lh-font-family);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.25;
}

.lh-heading-lg {
  margin: 0;
  color: var(--lh-text);
  font-family: var(--lh-font-family);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.3;
}

.lh-text-muted {
  color: var(--lh-text-secondary);
}

@media (max-width: 760px) {
  :root {
    --lh-page-gutter: var(--lh-page-gutter-mobile);
  }

  .lh-section {
    padding-block: var(--lh-space-12);
  }
}
/* LivingHub global typography */
body {
  font-family: var(--lh-font-family);
  font-size: var(--lh-font-size-md);
  line-height: 1.6;
  color: var(--lh-text);
}
button, input, select, textarea { font-family: inherit; }