:root {
color-scheme: light;
--font-serif: "Merriweather", "Inter", "Book Antiqua", palatino, georgia, serif;
--font-sans: "Inter", "Roboto", system-ui, -apple-system, sans-serif;
--font-display: "Montserrat", "Inter", var(--font-sans);
--font-ai: "Inter", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", menlo, consolas, "Courier New", monospace;
--font-size-3xs: 0.625rem;
--font-size-2xs: 0.7rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.85rem;
--font-size-md: 0.9375rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--space-2xs: 2px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-xxl: 64px;
--space-mobile-xs: 2px;
--space-mobile-sm: 6px;
--space-mobile-md: 12px;
--space-mobile-lg: 16px;
--space-mobile-xl: 24px;
--tracking-overline: 0.14em;
--rail-hero: 620px;
--rail-content: 900px;
--rail-page: 1100px;
--measure: 75ch;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 24px;
--radius-full: 9999px;
--header-h: 64px;
--header-height: var(--header-h);
--scroll-offset: calc(var(--header-height) + 32px);
--dock-bar: 0px;
--dock-total: 0px;
--dock-gap: 16px;
--dock-bar-pad: 10px;
--dock-bar-item: 52px;
--dock-float: calc(max(var(--dock-total, 0px), env(safe-area-inset-bottom, 0px)) + var(--dock-gap));
--z-base: 1;
--z-dropdown: 100;
--z-sticky-toolbar: 120;
--z-float: 200;
--z-dock-page: 900;
--z-dock-bar: 950;
--z-nav-overlay: 998;
--z-sticky: 999;
--z-popover: 1200;
--z-modal: 2000;
--z-toast: 2001;
--z-overlay: 9999;
--z-overlay-top: 10000;
--transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-standard: 0.2s ease;
--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-xs: 0 1px 2px hsl(28deg 30% 38% / 11%);
--shadow-sm: 0 2px 8px hsl(28deg 30% 36% / 14%), 0 1px 3px hsl(28deg 30% 36% / 7%);
--shadow-md: 0 4px 12px hsl(28deg 30% 36% / 17%), 0 1px 3px hsl(28deg 30% 36% / 9%);
--shadow-lg: 0 12px 28px hsl(28deg 30% 36% / 16%), 0 4px 12px hsl(28deg 30% 36% / 9%);
--shadow-xl: 0 20px 40px hsl(28deg 30% 36% / 20%), 0 8px 16px hsl(28deg 30% 36% / 11%);
--shadow-interactive: 0 6px 20px hsl(28deg 30% 36% / 19%);
--ring-raised: 0 0 0 1px color-mix(in srgb, var(--color-border) 50%, transparent) inset;
--lectern-seam: color-mix(in srgb, var(--color-border) 55%, transparent);
--gradient-divider: linear-gradient(90deg, transparent, var(--color-primary), transparent);
--gradient-card: linear-gradient(135deg, var(--color-surface-solid), color-mix(in srgb, var(--color-surface-solid) 98%, var(--color-primary)));
--gradient-surface-tint: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-solid)), color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-solid)));
--gradient-surface-accent: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 25%, var(--color-surface-solid)), color-mix(in srgb, var(--color-primary) 15%, var(--color-surface-solid)));
--gradient-vibe-spectrum: linear-gradient(to right, var(--color-danger), var(--color-accent), var(--color-text-muted), var(--color-primary));
--glass-blur: blur(14px) saturate(1.4);
--glass-blur-heavy: blur(22px) saturate(1.5);
--glass-bg-fallback: var(--color-surface-solid);
--edge-catch: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--color-primary) 55%, transparent) 22%,
color-mix(in srgb, var(--color-accent) 60%, transparent) 50%,
color-mix(in srgb, var(--color-primary) 55%, transparent) 78%,
transparent);
--focus-ring: 0 0 0 3px hsl(201deg 58% 40% / 85%);
--trv-ai-sparkle-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M14 2 L15.5 9.5 L23 11 L15.5 12.5 L14 20 L12.5 12.5 L5 11 L12.5 9.5 Z'/><path d='M5 2 L5.7 4.3 L8 5 L5.7 5.7 L5 8 L4.3 5.7 L2 5 L4.3 4.3 Z'/></svg>");
--color-bg-start: hsl(40deg 30% 98%);
--color-bg-end: hsl(37deg 26% 95.5%);
--color-surface: hsl(0deg 0% 100% / 90%);
--color-surface-solid: hsl(0deg 0% 100%);
--color-surface-soft: hsl(0deg 0% 100% / 50%);
--color-surface-hover: hsl(40deg 20% 92%);
--color-surface-elevated: hsl(40deg 22% 93%);
--color-surface-elevated-hover: color-mix(in srgb, var(--color-surface-elevated) 88%, var(--color-text));
--color-surface-menu: var(--color-surface-elevated);
--color-surface-menu-hover: var(--color-surface-elevated-hover);
--color-text: hsl(24deg 28% 13%);
--color-text-muted: hsl(28deg 14% 32%);
--color-border: hsl(35deg 22% 80%);
--color-primary: hsl(201deg 58% 37%);
--color-primary-hover: hsl(201deg 62% 30%);
--color-primary-contrast: #fff;
--color-primary-active-bg: hsl(201deg 58% 37% / 15%);
--color-primary-rgb: 40, 111, 149;
--color-accent: hsl(41deg 74% 49%);
--color-accent-contrast: hsl(25deg 35% 12%);
--color-success: hsl(150deg 50% 38%);
--color-red-letter: hsl(350deg 80% 50%);
--color-danger: hsl(350deg 80% 50%);
--color-danger-hover: hsl(350deg 80% 43%);
--color-glow-1: hsl(41deg 60% 52% / 15%);
--color-tag-topic: hsl(280deg 42% 48%);
--color-tag-person: hsl(220deg 50% 48%);
--color-tag-place: hsl(160deg 42% 38%);
--color-tag-timeline: var(--color-accent);
--color-page-accent: var(--color-primary);
--color-list-step-1: hsl(201deg 54% 30%);
--color-list-step-2: hsl(201deg 54% 35%);
--color-list-step-3: hsl(201deg 54% 40%);
--color-list-step-4: hsl(201deg 54% 45%);
--color-list-step-5: hsl(201deg 54% 50%);
--color-list-step-6: hsl(201deg 54% 55%);
--color-list-step-7: hsl(201deg 54% 60%);
--color-list-step-8: hsl(201deg 54% 65%);
--color-list-step-9: hsl(201deg 54% 70%);
--color-list-step-10: hsl(201deg 54% 75%);
--color-reaction-heart: hsl(350deg 70% 52%);
--color-reaction-prayer: hsl(270deg 38% 50%);
--color-reaction-crown: hsl(42deg 65% 50%);
--color-reaction-cross: hsl(25deg 32% 35%);
--color-reaction-sparkles: hsl(200deg 55% 50%);
}
.dark-mode {
color-scheme: dark;
--color-bg-start: hsl(220deg 14% 9%);
--color-bg-end: hsl(216deg 13% 11%);
--color-surface: hsl(218deg 13% 18% / 85%);
--color-surface-solid: hsl(218deg 13% 18%);
--color-surface-soft: hsl(218deg 12% 18% / 50%);
--color-surface-hover: hsl(218deg 13% 23%);
--color-surface-elevated: hsl(220deg 14% 6.5%);
--color-surface-menu: var(--color-surface-solid);
--color-surface-menu-hover: var(--color-surface-hover);
--color-text: hsl(40deg 16% 94%);
--color-text-muted: hsl(35deg 10% 71%);
--color-border: hsl(220deg 11% 32%);
--color-primary: hsl(200deg 60% 68%);
--color-primary-hover: hsl(200deg 62% 76%);
--color-primary-contrast: hsl(220deg 14% 8%);
--color-primary-active-bg: hsl(200deg 60% 68% / 18%);
--color-primary-rgb: 124, 190, 222;
--color-accent: hsl(41deg 78% 62%);
--color-accent-contrast: hsl(220deg 18% 6%);
--color-success: hsl(150deg 55% 58%);
--color-red-letter: hsl(0deg 92% 72%);
--color-danger: hsl(0deg 92% 72%);
--color-danger-hover: hsl(0deg 92% 64%);
--color-glow-1: hsl(41deg 68% 62% / 13%);
--focus-ring: 0 0 0 3px hsl(200deg 60% 68% / 55%);
--shadow-xs: 0 1px 2px hsl(220deg 40% 2% / 24%);
--shadow-sm: 0 2px 8px hsl(220deg 45% 2% / 30%), 0 1px 3px hsl(220deg 45% 2% / 20%);
--shadow-md: 0 4px 12px hsl(220deg 45% 2% / 34%), 0 1px 3px hsl(220deg 45% 2% / 23%);
--shadow-lg: 0 12px 28px hsl(220deg 45% 2% / 35%), 0 4px 12px hsl(220deg 45% 2% / 27%);
--shadow-xl: 0 20px 40px hsl(220deg 50% 2% / 42%), 0 8px 16px hsl(220deg 50% 2% / 31%);
--shadow-interactive: 0 6px 20px hsl(220deg 50% 2% / 38%);
--color-tag-topic: hsl(280deg 50% 70%);
--color-tag-person: hsl(220deg 55% 70%);
--color-tag-place: hsl(160deg 50% 60%);
--color-tag-timeline: var(--color-accent);
--color-reaction-heart: hsl(350deg 75% 65%);
--color-reaction-prayer: hsl(270deg 45% 65%);
--color-reaction-crown: hsl(42deg 75% 60%);
--color-reaction-cross: hsl(25deg 45% 70%);
--color-reaction-sparkles: hsl(200deg 60% 70%);
--color-list-step-1: hsl(200deg 58% 50%);
--color-list-step-2: hsl(200deg 58% 53%);
--color-list-step-3: hsl(200deg 58% 56%);
--color-list-step-4: hsl(200deg 58% 59%);
--color-list-step-5: hsl(200deg 58% 62%);
--color-list-step-6: hsl(200deg 58% 65%);
--color-list-step-7: hsl(200deg 58% 68%);
--color-list-step-8: hsl(200deg 58% 71%);
--color-list-step-9: hsl(200deg 58% 74%);
--color-list-step-10: hsl(200deg 58% 77%);
}
@media (width <= 967px) {
:root { --header-h: 60px; }
}