:root,
:root[data-theme='light'] {
  --qh-font-sans: "Manrope", "Segoe UI", Tahoma, sans-serif;
  --qh-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --qh-font-weight-regular: 400;
  --qh-font-weight-medium: 500;
  --qh-font-weight-semibold: 600;
  --qh-font-weight-bold: 700;
  --qh-font-size-body-xs: 10px;
  --qh-font-size-caption: 11px;
  --qh-font-size-label: 12px;
  --qh-font-size-body-sm: 13px;
  --qh-font-size-body-md: 14px;
  --qh-font-size-body-lg: 16px;
  --qh-font-size-title-sm: 18px;
  --qh-font-size-title: 20px;
  --qh-font-size-title-md: 24px;
  --qh-font-size-title-lg: 34px;
  --qh-font-size-hero: clamp(34px, 4.2vw, 52px);
  --qh-line-tight: 1.2;
  --qh-line-normal: 1.5;
  --qh-line-relaxed: 1.65;
  --qh-radius-sm: 8px;
  --qh-radius-md: 10px;
  --qh-radius-lg: 12px;
  --qh-radius-xl: 16px;
  --qh-radius-feature: 18px;
  --qh-radius-pill: 999px;
  --qh-space-2: 8px;
  --qh-space-3: 10px;
  --qh-space-4: 12px;
  --qh-space-5: 16px;
  --qh-space-6: 20px;
  --qh-space-8: 32px;
  --qh-control-height-md: 42px;
  --qh-control-height-lg: 48px;
  --qh-surface: #ffffff;
  --qh-surface-soft: #f8fafc;
  --qh-surface-muted: #f1f5f9;
  --qh-text-primary: #0f172a;
  --qh-text-secondary: #475569;
  --qh-text-tertiary: #94a3b8;
  --qh-border: #e2e8f0;
  --qh-border-strong: #dbe2ea;
  --qh-border-muted: #e5e7eb;
  --qh-primary: #0f172a;
  --qh-primary-contrast: #ffffff;
  --qh-accent: #d4af37;
  --qh-danger: #b91c1c;
  --qh-overlay: rgba(15, 23, 42, 0.45);
  --qh-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
  --qh-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.18);
  --qh-focus-ring: 0 0 0 3px color-mix(in srgb, var(--qh-text-primary) 12%, transparent);
  --qh-card-border: var(--qh-border-muted);
  --qh-card-shadow: var(--qh-shadow-sm);
  --qh-card-shadow-strong: var(--qh-shadow-lg);
  --qh-calendar-panel-border: rgba(226, 232, 240, 0.9);
  --qh-calendar-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.92) 100%);
  --qh-calendar-panel-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
  --qh-calendar-button-bg: rgba(255, 255, 255, 0.95);
  --qh-calendar-cell-bg: rgba(255, 255, 255, 0.82);
  --qh-calendar-cell-empty-bg: rgba(248, 250, 252, 0.85);
  --qh-calendar-cell-muted-bg: rgba(247, 250, 252, 0.75);
  --qh-calendar-cell-filled-bg: linear-gradient(180deg, rgba(241, 245, 249, 0.98) 0%, rgba(226, 232, 240, 0.98) 100%);
  --qh-calendar-cell-filled-border: rgba(148, 163, 184, 0.35);
  --qh-calendar-cell-filled-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(15, 23, 42, 0.08);
  --qh-calendar-cell-hover-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
  --qh-calendar-cell-hover-border: rgba(148, 163, 184, 0.45);
  --qh-calendar-cell-active-border: rgba(100, 116, 139, 0.6);
  --qh-calendar-cell-active-ring: inset 0 0 0 1px rgba(100, 116, 139, 0.22);
  --qh-calendar-cell-today-ring: inset 0 0 0 1px rgba(199, 210, 254, 0.8);
  --qh-calendar-connector-bg: rgba(226, 232, 240, 0.9);
  --qh-calendar-popover-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.95) 100%);
  --qh-calendar-popover-shadow: 0 20px 46px rgba(15, 23, 42, 0.14);
  --qh-calendar-daily-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
  --qh-calendar-daily-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme='dark'] {
  --qh-surface: #11100f;
  --qh-surface-soft: #171514;
  --qh-surface-muted: #1d1a18;
  --qh-text-primary: #f1e7d9;
  --qh-text-secondary: #ada294;
  --qh-text-tertiary: #746b63;
  --qh-border: #2b2724;
  --qh-border-strong: #39332f;
  --qh-border-muted: #322d29;
  --qh-primary: #3583dc;
  --qh-primary-contrast: #f6fbff;
  --qh-accent: #c7a267;
  --qh-danger: #ef7d72;
  --qh-overlay: rgba(8, 7, 6, 0.78);
  --qh-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.34);
  --qh-shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.5);
  --qh-calendar-panel-border: color-mix(in srgb, var(--qh-border-strong) 88%, transparent);
  --qh-calendar-panel-bg: linear-gradient(180deg, color-mix(in srgb, var(--qh-surface-soft) 96%, transparent) 0%, color-mix(in srgb, var(--qh-surface-muted) 98%, transparent) 100%);
  --qh-calendar-panel-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  --qh-calendar-button-bg: color-mix(in srgb, var(--qh-surface) 84%, var(--qh-surface-soft));
  --qh-calendar-cell-bg: color-mix(in srgb, var(--qh-surface) 78%, var(--qh-surface-soft));
  --qh-calendar-cell-empty-bg: color-mix(in srgb, var(--qh-surface-soft) 92%, var(--qh-surface-muted));
  --qh-calendar-cell-muted-bg: color-mix(in srgb, var(--qh-surface-soft) 88%, var(--qh-surface-muted));
  --qh-calendar-cell-filled-bg: linear-gradient(180deg, color-mix(in srgb, var(--qh-surface-muted) 84%, var(--qh-accent) 8%) 0%, color-mix(in srgb, var(--qh-surface-soft) 92%, transparent) 100%);
  --qh-calendar-cell-filled-border: color-mix(in srgb, var(--qh-accent) 24%, var(--qh-border-strong));
  --qh-calendar-cell-filled-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 4px 12px rgba(0, 0, 0, 0.22);
  --qh-calendar-cell-hover-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  --qh-calendar-cell-hover-border: color-mix(in srgb, var(--qh-accent) 22%, var(--qh-border-strong));
  --qh-calendar-cell-active-border: color-mix(in srgb, var(--qh-accent) 34%, var(--qh-border-strong));
  --qh-calendar-cell-active-ring: inset 0 0 0 1px color-mix(in srgb, var(--qh-accent) 18%, transparent);
  --qh-calendar-cell-today-ring: inset 0 0 0 1px color-mix(in srgb, var(--qh-accent) 28%, transparent);
  --qh-calendar-connector-bg: color-mix(in srgb, var(--qh-surface-muted) 84%, var(--qh-accent) 12%);
  --qh-calendar-popover-bg: linear-gradient(180deg, color-mix(in srgb, var(--qh-surface-soft) 98%, transparent) 0%, color-mix(in srgb, var(--qh-surface-muted) 100%, transparent) 100%);
  --qh-calendar-popover-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
  --qh-calendar-daily-bg: linear-gradient(180deg, color-mix(in srgb, var(--qh-surface) 88%, var(--qh-surface-soft)) 0%, color-mix(in srgb, var(--qh-surface-soft) 96%, transparent) 100%);
  --qh-calendar-daily-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

body {
  background: var(--qh-surface);
  color: var(--qh-text-primary);
  font-family: var(--qh-font-sans);
  font-size: var(--qh-font-size-body-md);
  line-height: var(--qh-line-relaxed);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--qh-text-primary);
  line-height: var(--qh-line-tight);
  font-weight: var(--qh-font-weight-semibold);
  letter-spacing: -0.02em;
}

code,
pre,
kbd,
samp {
  font-family: var(--qh-font-mono);
}

:root[data-theme='dark'] input,
:root[data-theme='dark'] select,
:root[data-theme='dark'] textarea {
  background: var(--qh-surface-soft);
  color: var(--qh-text-primary);
  border-color: var(--qh-border-strong);
}

:root[data-theme='dark'] .modal-overlay {
  background: var(--qh-overlay);
}

:root[data-theme='dark'] body {
  background:
    radial-gradient(circle at top left, rgba(68, 57, 45, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(43, 74, 111, 0.12), transparent 24%),
    linear-gradient(180deg, #121110 0%, #0f0e0d 100%);
}