:root {
    --custom-font: "Source Sans Pro";
    --system-fonts: -apple-system;
    --fallback-font: sans-serif;

    --site-content-max: 1240px;
    --site-content-gutter: clamp(1.25rem, 4.5vw, 3.5rem);
    --site-content-outer-inset: max(6vw, calc((100vw - var(--site-content-max)) / 2));
    --site-content-viewport-inset: calc(var(--site-content-outer-inset) + var(--site-content-gutter));

    --site-color-bg: #fff;
    --site-color-text: #111;
    --site-color-index-mark-1: #764ba2;
    --site-color-index-mark-2: #4caf50;
    --site-color-index-mark-3: #4facfe;
    --site-color-focus: rgba(0, 0, 0, 0.25);
    --site-color-button-bg: #000;
    --site-color-button-text: #fff;
    --site-color-button-border: #000;
    --site-color-button-hover-bg: #333;
    --site-color-button-hover-border: #333;
    --site-color-button-active-bg: #555;
    --site-color-button-active-border: #555;
    --site-color-field-border: #ccc;
    --site-color-field-bg: #fff;
    --site-color-field-text: #333;
    --site-color-muted: #777;
    --site-color-status: #555;
    --site-color-error: #c0392b;
    --site-color-notice: #1565c0;
    --site-color-success: #2e7d32;
    --site-color-warning: #8a5a00;
    --site-color-row-border: #e5e5e5;
    --site-color-row-bg: #fff;
    --site-color-row-text: #333;
    --site-color-highlight-border: rgba(0, 0, 0, 0.02);
    --site-color-highlight-grad-1: rgba(255, 255, 255, 0.5);
    --site-color-highlight-grad-2: rgba(242, 242, 242, 0.5);
    --site-color-highlight-grad-3: rgba(255, 255, 255, 0.5);

    --site-shadow-elevated: 0 4px 30px rgba(0, 0, 0, 0.1);
    --site-shadow-subtle: 0 4px 30px rgba(0, 0, 0, 0.05);
    --site-shadow-control: 0px 5px 10px rgba(0, 0, 0, 0.02) inset,
        0px -5px 20px rgba(0, 0, 0, 0.04) inset,
        0px 0px 4px rgba(0, 0, 0, 0.2);
    --site-shadow-control-hover: 0px 5px 10px rgba(0, 0, 0, 0.04) inset,
        0px -5px 10px rgba(0, 0, 0, 0.02) inset,
        0px 0px 6px rgba(0, 0, 0, 0.1);
    --site-shadow-control-active: 0px 5px 10px rgba(0, 0, 0, 0.02) inset, 0px -5px 10px rgba(0, 0, 0, 0.02) inset, 0px 0px 6px rgba(0, 0, 0, 0.05);
    --site-shadow-glass: 0px 5px 10px rgba(0, 0, 0, 0.02) inset,
        0px -5px 20px rgba(0, 0, 0, 0.04) inset,
        var(--site-shadow-elevated);
    --site-shadow-cover: 0 4px 30px rgba(0, 0, 0, 0.5);
    --site-shadow-badge-ring: 0 0 0 2px var(--site-surface-glass-subtle);

    --site-radius-pill: 10rem;
    --site-radius-control: 5rem;
    --site-radius-panel: 3rem;
    --site-radius-surface: 0.75rem;
    --site-radius-area: 1.5rem;
    --site-radius-sheet: 1rem 1rem 0 0;
    --site-radius-artwork: 10%;
    --site-radius-progress: 2rem;
    --site-radius-progress-fill: 2rem 0 0 2rem;
    --site-radius-round: 999px;

    --site-surface-glass: rgba(255, 255, 255, 0.25);
    --site-surface-glass-subtle: rgba(0, 0, 0, 0.02);
    --site-surface-decoration: rgba(0, 0, 0, 0.05);
    --site-surface-transparent: rgba(0, 0, 0, 0);
    --site-surface-overlay: var(--site-surface-glass-subtle);
    --site-surface-hover: rgba(0, 0, 0, 0.1);
    --site-surface-active: rgba(0, 0, 0, 0.2);
    --site-surface-muted: rgba(0, 0, 0, 0.025);
    --site-surface-progress-buffer: rgba(0, 0, 0, 0.075);

    --site-color-text-primary: rgba(0, 0, 0, 1);
    --site-color-text-muted: rgba(142, 142, 142, 1);
    --site-color-text-inverse: #fff;
    --site-color-progress: rgba(0, 0, 0, 0.5);
    --site-color-spinner: rgba(0, 0, 0, 0.2);
    --site-color-spinner-transparent: rgba(0, 0, 0, 0);
    --site-color-cover-overlay: rgba(0, 0, 0, 0.45);
    --site-color-banner-bg: rgba(0, 0, 0, 0.675);
    --site-color-notification-bg: #ff3b30;
    --site-color-notification-text: #fff;
    --site-color-debug-animation: #ff0000;

    --site-backdrop-blur: blur(10px);
    --site-backdrop-blur-strong: blur(20px);

    --site-button-border: 0.5px solid rgba(255, 255, 255, 1);
}

@media (max-width: 780px) {
    :root {
        --site-content-gutter: clamp(1rem, 5vw, 2rem);
    }
}

@media (max-width: 768px) {
    :root {
        /* The compact page shell retains its existing one-rem margin. */
        --site-content-outer-inset: calc(6vw + 1rem);
    }
}

body[color-scheme="dark"] {
    --site-color-bg: #111;
    --site-color-text: #f2f2f2;
    --site-color-index-mark-1: #b99bff;
    --site-color-index-mark-2: #7bd67f;
    --site-color-index-mark-3: #76c8ff;
    --site-color-focus: rgba(255, 255, 255, 0.25);
    --site-color-button-bg: #f2f2f2;
    --site-color-button-text: #111;
    --site-color-button-border: #f2f2f2;
    --site-color-button-hover-bg: #d6d6d6;
    --site-color-button-hover-border: #d6d6d6;
    --site-color-button-active-bg: #bdbdbd;
    --site-color-button-active-border: #bdbdbd;
    --site-color-field-border: #555;
    --site-color-field-bg: #1d1d1d;
    --site-color-field-text: #f2f2f2;
    --site-color-muted: #b8b8b8;
    --site-color-status: #d0d0d0;
    --site-color-error: #ff8a80;
    --site-color-notice: #8ab4ff;
    --site-color-success: #8fd694;
    --site-color-warning: #ffd37a;
    --site-color-row-border: #333;
    --site-color-row-bg: #1a1a1a;
    --site-color-row-text: #f2f2f2;
    --site-color-highlight-border: rgba(255, 255, 255, 0.08);
    --site-color-highlight-grad-1: rgba(255, 255, 255, 0.08);
    --site-color-highlight-grad-2: rgba(255, 255, 255, 0.03);
    --site-color-highlight-grad-3: rgba(255, 255, 255, 0.08);

    --site-shadow-elevated: 0 4px 30px rgba(0, 0, 0, 0.45);
    --site-shadow-subtle: 0 4px 30px rgba(0, 0, 0, 0.3);
    --site-shadow-glass: 0px 5px 10px rgba(0, 0, 0, 0.18) inset,
        0px -5px 20px rgba(0, 0, 0, 0.24) inset,
        var(--site-shadow-elevated);
    --site-shadow-cover: 0 4px 30px rgba(0, 0, 0, 0.8);

    --site-surface-glass: rgba(20, 20, 20, 0.55);
    --site-surface-glass-subtle: rgba(255, 255, 255, 0.06);
    --site-surface-decoration: rgba(255, 255, 255, 0.08);
    --site-surface-transparent: rgba(255, 255, 255, 0);
    --site-surface-overlay: var(--site-surface-glass-subtle);
    --site-surface-hover: rgba(255, 255, 255, 0.12);
    --site-surface-active: rgba(255, 255, 255, 0.22);
    --site-surface-muted: rgba(255, 255, 255, 0.04);
    --site-surface-progress-buffer: rgba(255, 255, 255, 0.12);

    --site-color-text-primary: rgba(245, 245, 245, 1);
    --site-color-text-muted: rgba(180, 180, 180, 1);
    --site-color-progress: rgba(255, 255, 255, 0.52);
    --site-color-spinner: rgba(255, 255, 255, 0.35);
    --site-color-spinner-transparent: rgba(255, 255, 255, 0);
    --site-color-cover-overlay: rgba(0, 0, 0, 0.62);
    --site-color-banner-bg: rgba(0, 0, 0, 0.78);
    --site-color-notification-bg: #ff6b61;
    --site-color-notification-text: #fff;
    --site-color-debug-animation: #ff8a80;
    --site-button-border: 0.5px solid rgba(0, 0, 0, 1);
}