:root {
    --font-body: "Be Vietnam Pro", "Inter", "Segoe UI", "Noto Sans", Arial, sans-serif;
    --font-heading: "Be Vietnam Pro", "Inter", "Segoe UI", "Noto Sans", Arial, sans-serif;
    --font-serif-title: "Noto Serif", "Merriweather", Georgia, "Times New Roman", serif;
    --color-background: #f7f4ef;
    --color-surface: #ffffff;
    --color-text: #111827;
    --color-muted: #64748b;
    --color-border: #ded8cf;
    --color-primary: #8b2f43;
    --color-on-primary: #FFFFFF;
    --color-on-success: #111111;
    --color-on-warning: #FFFFFF;
    --color-on-danger: #FFFFFF;
    --color-on-info: #FFFFFF;
    --color-on-status: var(--color-on-danger);
    --color-accent: #a44959;
    --site-max-width: 1180px;
    --site-gutter-desktop: 1.5rem;
    --site-gutter-tablet: 1rem;
    --site-gutter-mobile: 0.75rem;
    --theme-primary-hover-target: #000000;
    --color-success: #0F9D58;
    --color-warning: #B45A14;
    --color-danger: #B91C1C;
    --color-info: #2563EB;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --radius-circle: 50%;
}
body:not(.reader-body) {
    --color-bg: var(--color-background);
    --color-bg-page: var(--color-background);
    --color-text-primary: var(--color-text);
    --color-text-secondary: var(--color-muted);
    --color-surface-muted: color-mix(in srgb, var(--color-surface) 92%, var(--color-background) 8%);
    --color-text-muted: var(--color-muted);
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 82%, var(--theme-primary-hover-target) 18%);
    --color-primary-dark: var(--color-primary-hover);
    --color-primary-strong: var(--color-primary-dark);
    --color-primary-soft: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface) 92%);
    --color-secondary: var(--color-accent);
    --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface) 92%);
    --color-secondary-dark: color-mix(in srgb, var(--color-secondary) 72%, var(--theme-primary-hover-target) 28%);
    --color-accent-dark: color-mix(in srgb, var(--color-accent) 72%, var(--theme-primary-hover-target) 28%);
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface) 92%);
    --color-surface-soft: color-mix(in srgb, var(--color-surface) 92%, var(--color-background) 8%);
    --color-deep: color-mix(in srgb, var(--color-text) 68%, var(--color-background) 32%);
    --color-shadow: color-mix(in srgb, var(--color-primary) 14%, transparent);
    --color-panel-members: var(--color-accent);
    --color-panel-members-soft: var(--color-accent-soft);
    --color-panel-requests: var(--color-primary);
    --color-panel-requests-soft: var(--color-primary-soft);
    --color-panel-info: var(--color-secondary);
    --color-panel-info-soft: var(--color-secondary-soft);
    --color-footer-bg: color-mix(in srgb, var(--color-surface) 92%, var(--color-background) 8%);
    --color-footer-text: color-mix(in srgb, var(--color-text) 88%, var(--color-surface) 12%);
    --color-footer-muted: color-mix(in srgb, var(--color-text) 64%, var(--color-surface) 36%);
    --color-footer-border: color-mix(in srgb, var(--color-text) 8%, transparent);
    --color-footer-link: var(--color-primary);
    --button-primary-bg: var(--color-primary);
    --button-primary-text: var(--color-on-primary);
    --button-primary-border: var(--color-primary-dark);
    --button-primary-hover-bg: var(--color-primary-dark);
    --button-primary-hover-text: var(--color-on-primary);
    --button-secondary-bg: var(--color-surface);
    --button-secondary-text: var(--color-text);
    --button-secondary-border: var(--color-border);
    --button-account-bg: var(--color-surface);
    --button-account-text: var(--color-text);
    --button-account-border: var(--color-border);
    --page-hero-bg: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, color-mix(in srgb, var(--color-primary-soft) 90%, transparent) 45%, color-mix(in srgb, var(--color-surface) 95%, transparent) 100%);
    --page-hero-heading: var(--color-primary);
    --page-hero-copy: var(--color-muted);
    --request-podium-card-1-bg: var(--color-primary);
    --request-podium-card-1-text: var(--color-on-primary);
    --request-podium-card-2-bg: color-mix(in srgb, var(--color-primary) 58%, var(--color-accent) 42%);
    --request-podium-card-2-text: var(--color-on-primary);
    --request-podium-card-3-bg: color-mix(in srgb, var(--color-accent) 70%, var(--color-primary) 30%);
    --request-podium-card-3-text: var(--color-on-primary);
    --request-podium-card-dark-bg: var(--color-surface);
    --request-podium-card-dark-text: var(--color-text);
    --rank-1-bg: var(--color-primary);
    --rank-1-text: var(--color-on-primary);
    --rank-2-bg: var(--color-accent);
    --rank-2-text: var(--color-on-primary);
    --rank-3-bg: color-mix(in srgb, var(--color-accent) 72%, var(--color-primary) 28%);
    --rank-3-text: var(--color-on-primary);
    --rank-4-bg: color-mix(in srgb, var(--color-primary-soft) 72%, var(--color-surface) 28%);
    --rank-4-text: var(--color-text);
    --rank-5-bg: color-mix(in srgb, var(--color-primary-soft) 40%, var(--color-surface) 60%);
    --rank-5-text: var(--color-text);
    --home-rank-orange-1-bg: var(--color-primary);
    --home-rank-orange-1-text: var(--color-on-primary);
    --home-rank-orange-2-bg: var(--color-accent);
    --home-rank-orange-2-text: var(--color-on-primary);
    --home-rank-orange-3-bg: color-mix(in srgb, var(--color-accent) 72%, var(--color-primary) 28%);
    --home-rank-orange-3-text: var(--color-on-primary);
    --home-rank-orange-4-bg: color-mix(in srgb, var(--color-primary-soft) 72%, var(--color-surface) 28%);
    --home-rank-orange-4-text: var(--color-text);
    --home-rank-orange-5-bg: color-mix(in srgb, var(--color-primary-soft) 40%, var(--color-surface) 60%);
    --home-rank-orange-5-text: var(--color-text);
    --story-hero-muted: color-mix(
        in srgb,
        var(--color-on-primary) 82%,
        var(--color-primary) 18%
    );
    --color-link: var(--theme-link, var(--color-text));
    --color-on-accent: var(--theme-on-accent, var(--color-text));
    --color-accent-text: var(--theme-accent-text, var(--color-link));
    --color-focus: var(--theme-focus, var(--color-link));
    --color-overlay-bg: rgba(18, 18, 18, 0.88);
    --color-overlay-text: #FFFFFF;
    --color-scrim: rgba(0, 0, 0, 0.56);
    --status-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    --status-success-border: color-mix(in srgb, var(--color-success) 34%, var(--color-border));
    --status-success-text: color-mix(in srgb, var(--color-success) 72%, var(--color-text));
    --status-warning-bg: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
    --status-warning-border: color-mix(in srgb, var(--color-warning) 34%, var(--color-border));
    --status-warning-text: color-mix(in srgb, var(--color-warning) 72%, var(--color-text));
    --status-danger-bg: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    --status-danger-border: color-mix(in srgb, var(--color-danger) 32%, var(--color-border));
    --status-danger-text: color-mix(in srgb, var(--color-danger) 74%, var(--color-text));
    --status-info-bg: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
    --status-info-border: color-mix(in srgb, var(--color-info) 30%, var(--color-border));
    --status-info-text: color-mix(in srgb, var(--color-info) 72%, var(--color-text));
}
html[data-layout="public"]:not([data-theme]) body:not(.reader-body),
html[data-layout="public"][data-theme="light"] body:not(.reader-body) {
    --theme-primary-hover-target: #000000;
}
html[data-layout="public"][data-theme="dark"] body:not(.reader-body),
html[data-layout="public"].theme-dark body:not(.reader-body) {
    --theme-primary-hover-target: #FFFFFF;
}