:root {
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-gap-1: 4px;
  --ui-gap-2: 8px;
  --ui-gap-3: 12px;
  --ui-gap-4: 16px;
  --ui-gap-5: 20px;
  --ui-gap-6: 24px;
  --ui-gap-8: 32px;
  --ui-gap-10: 40px;
}

body {
  --ui-surface: var(--color-surface);
  --ui-surface-solid: var(--ui-surface);
  --ui-surface-soft: color-mix(in srgb, var(--theme-primary) 4%, var(--ui-surface));
  --ui-surface-soft-strong: color-mix(in srgb, var(--theme-primary) 8%, var(--ui-surface));
  --ui-surface-secondary: color-mix(in srgb, var(--theme-secondary) 10%, var(--ui-surface));
  --ui-surface-panel: color-mix(in srgb, var(--color-bg) 88%, var(--ui-surface));
  --ui-surface-glass: color-mix(in srgb, var(--ui-surface) 82%, transparent);
  --ui-surface-glass-strong: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  --ui-surface-overlay-08: color-mix(in srgb, var(--ui-surface) 8%, transparent);
  --ui-surface-overlay-14: color-mix(in srgb, var(--ui-surface) 14%, transparent);
  --ui-surface-overlay-18: color-mix(in srgb, var(--ui-surface) 18%, transparent);
  --ui-surface-overlay-22: color-mix(in srgb, var(--ui-surface) 22%, transparent);
  --ui-surface-overlay-28: color-mix(in srgb, var(--ui-surface) 28%, transparent);
  --ui-surface-overlay-38: color-mix(in srgb, var(--ui-surface) 38%, transparent);
  --ui-surface-overlay-62: color-mix(in srgb, var(--ui-surface) 62%, transparent);
  --ui-surface-overlay-76: color-mix(in srgb, var(--ui-surface) 76%, transparent);
  --ui-surface-overlay-82: color-mix(in srgb, var(--ui-surface) 82%, transparent);
  --ui-surface-overlay-88: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  --ui-surface-overlay-92: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  --ui-border-soft: color-mix(in srgb, var(--cream-border) 72%, var(--ui-surface));
  --ui-border-strong: color-mix(in srgb, var(--theme-primary) 18%, var(--ui-surface));
  --ui-border-focus: color-mix(in srgb, var(--theme-secondary) 24%, var(--ui-surface));
  --ui-border-glass: color-mix(in srgb, var(--ui-surface) 66%, transparent);
  --ui-text: var(--cream-text);
  --ui-text-soft: color-mix(in srgb, var(--ui-text) 86%, var(--ui-surface));
  --ui-text-muted: color-mix(in srgb, var(--ui-text) 68%, var(--ui-surface));
  --ui-text-faint: color-mix(in srgb, var(--ui-text) 54%, var(--ui-surface));
  --ui-text-on-dark: var(--ui-surface);
  --ui-ink-deep: color-mix(in srgb, var(--ui-text) 88%, black);
  --ui-ink-strong: color-mix(in srgb, var(--ui-text) 80%, black);
  --ui-ink-muted-base: color-mix(in srgb, var(--ui-text) 64%, var(--ui-surface-solid));
  --ui-accent-text: color-mix(in srgb, var(--theme-primary) 72%, var(--ui-text));
  --ui-secondary-text: color-mix(in srgb, var(--theme-secondary) 76%, var(--ui-text));
  --ui-accent-strong: color-mix(in srgb, var(--theme-primary) 82%, var(--ui-text));
  --ui-secondary-strong: color-mix(in srgb, var(--theme-secondary) 78%, var(--ui-text));
  --ui-success-strong: color-mix(in srgb, var(--color-success) 80%, var(--ui-text));
  --ui-error-strong: color-mix(in srgb, var(--color-error) 80%, var(--ui-text));
  --ui-shadow-soft: 0 10px 24px color-mix(in srgb, var(--ui-text) 10%, transparent);
  --ui-shadow-strong: 0 18px 40px color-mix(in srgb, var(--ui-text) 16%, transparent);
  --ui-cta-gradient: var(--theme-primary);
  --ui-focus-gradient: var(--theme-secondary);
  --ui-success-gradient: color-mix(in srgb, var(--color-success) 88%, var(--theme-primary));
  --ui-error-gradient: color-mix(in srgb, var(--color-error) 88%, var(--theme-primary));
  --ui-info-gradient: color-mix(in srgb, var(--theme-secondary) 16%, var(--ui-surface));
  --ui-accent-panel-gradient: color-mix(in srgb, var(--theme-primary) 14%, var(--ui-surface-solid));
  --ui-hero-wash-primary: color-mix(in srgb, var(--theme-primary) 14%, var(--ui-surface-solid));
  --ui-hero-wash-secondary: color-mix(in srgb, var(--theme-secondary) 14%, var(--ui-surface-solid));
  --ui-warning-bg: color-mix(in srgb, var(--color-warning) 12%, var(--ui-surface));
  --ui-warning-border: color-mix(in srgb, var(--color-warning) 24%, var(--ui-surface));
  --ui-warning-text: color-mix(in srgb, var(--color-warning) 78%, var(--ui-text));
  --ui-error-bg: color-mix(in srgb, var(--color-error) 12%, var(--ui-surface));
  --ui-error-border: color-mix(in srgb, var(--color-error) 24%, var(--ui-surface));
  --ui-error-text: color-mix(in srgb, var(--color-error) 82%, var(--ui-text));
  --ui-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--ui-surface));
  --ui-success-border: color-mix(in srgb, var(--color-success) 24%, var(--ui-surface));
  --ui-success-text: color-mix(in srgb, var(--color-success) 80%, var(--ui-text));
  --ui-glow-primary: color-mix(in srgb, var(--theme-primary) 18%, transparent);
  --ui-glow-secondary: color-mix(in srgb, var(--theme-secondary) 18%, transparent);
  --ui-glow-focus: var(--ui-glow-secondary);
  --ui-glow-success: color-mix(in srgb, var(--color-success) 18%, transparent);
  min-height: 100vh;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:focus-visible {
  outline: 2px solid var(--ui-border-focus);
  outline-offset: 2px;
}

.site-main {
  padding-top: 104px;
}

@media (max-width: 768px) {
  .site-main {
    padding-top: 92px;
  }
}

.page-cv {
  padding-block: var(--ui-gap-8);
}

.page-shell {
  display: grid;
  gap: var(--ui-gap-6);
}

.panel {
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border-soft);
  background: var(--ui-surface-panel);
  box-shadow: var(--ui-shadow-soft);
}

.hx-indicator {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.htmx-request .hx-indicator,
.htmx-request.hx-indicator {
  opacity: 1;
}