:root {
    /* Base text colors */
    --color-text: var(--gray-500);
    --color-text-muted: var(--gray-700);
    --color-text-light: var(--gray-300);
    --color-text-strong: var(--gray-0);
    --color-footer-text: var(--color-text-muted);
    --color-footer-heading: var(--gray-400);
    --color-site-title: var(--gray-0);
    --color-big-logo-title: var(--color-site-title);
    --color-big-logo-description: var(--color-text-muted);
    --color-panel-text-stats: var(--gray-0);
    --color-page-meta: var(--color-text);
    --color-home-link: var(--gray-500);
    --color-home-link-hover: var(--blue-300);
    --color-figure-media-background: var(--gray-0);
    --color-link: var(--blue-300);
    --color-link-hover: var(--blue-100);
    --color-card-title: var(--color-site-title);
    --color-link-external: var(--green-500);
    --color-link-external-hover: var(--green-300);
    --color-link-affiliated: var(--pink-500);
    --color-link-affiliated-hover: var(--pink-300);
    --color-link-dead: var(--red-500);
    --color-link-dead-hover: var(--red-300);
    --color-link-problematic: var(--amber-500);
    --color-link-problematic-hover: var(--amber-300);
    --color-keyword: var(--gray-500);
    --color-keyword-hover: var(--gray-0);
    --color-footer-link: var(--gray-500);
    --color-footer-link-hover: var(--gray-0);

    /* Border tokens */
    --border-outer-color: var(--gray-800);
    --border-panel: 1px solid var(--border-outer-color);
    --border-panel-outer: 1px solid var(--border-outer-color);
    --border-panel-top: 2px solid var(--border-outer-color);
    --border-keyword: none;

    /* Radius tokens */
    --radius-base: 0;
    --radius-panel: var(--radius-base);
    --radius-pagination: var(--radius-base);
    --radius_keyword: var(--radius-base);

    /* Shadow tokens */
    --color-shadow-base: var(--gray-900);
    --shadow-base: 0 12px 0.8rem var(--color-shadow-base);
    --shadow-panel: var(--shadow-base);
    --shadow-pagination: var(--shadow-base);
    --shadow-text: 0 12px 0.8rem var(--color-shadow-base);
    --shadow-big-logo-title: var(--shadow-text);

    /* Overlay helpers */
    --overlay-dark-strong: rgba(15, 17, 20, 0.72);
    --overlay-dark-medium: rgba(51, 55, 70, 0.55);
    --overlay-dark-soft: rgba(124, 131, 146, 0.28);
    --overlay-light-soft: rgba(255, 255, 255, 0.12);
    --overlay-blue-soft: rgba(70, 127, 255, 0.20);

    /* Background surfaces */
    --background-body: var(--gray-900);
    --background-body-alt: var(--gray-800);
    --background-panel:
        radial-gradient(circle at 18% 18%, var(--overlay-dark-medium) 0%, transparent 58%),
        radial-gradient(circle at 82% 82%, var(--overlay-dark-strong) 0%, transparent 64%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
    --background-panel-stat: var(--background-panel);
    --background-pagination: var(--background-panel);
    --background-panel-stats: radial-gradient(circle at 8% 92%, var(--overlay-dark-medium) 0%, transparent 55%),
        radial-gradient(circle at 90% 12%, var(--overlay-dark-soft) 0%, transparent 60%),
        linear-gradient(120deg, var(--gray-900) 0%, var(--gray-800) 100%);
    --background-figure:
        radial-gradient(circle at 22% 22%, var(--overlay-dark-soft) 0%, transparent 58%),
        radial-gradient(circle at 78% 78%, var(--overlay-dark-medium) 0%, transparent 62%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
    --background-footer:
        radial-gradient(ellipse at top, var(--overlay-dark-medium) 0%, transparent 68%),
        linear-gradient(165deg, var(--gray-900) 0%, var(--gray-800) 100%);
    --background-spoiler: var(--yellow-900);
    --background-chat-me: linear-gradient(135deg, var(--overlay-blue-soft) 0%, transparent 75%);
    --background-chat-other: linear-gradient(135deg, var(--overlay-light-soft) 0%, transparent 75%);

    /* Glow accents */
    --color-hr-glow: var(--overlay-light-soft);
    --background-hr-glow: radial-gradient(ellipse at center -20px,
            var(--color-hr-glow),
            var(--transparent) 80%);
    --background-hr-glow-mirror: radial-gradient(ellipse at center calc(100% + 20px),
            var(--color-hr-glow),
            var(--transparent) 80%);

    /* Weather panel */
    --weather-background:
        radial-gradient(circle at 18% 12%, var(--overlay-dark-soft) 0%, transparent 48%),
        radial-gradient(circle at 80% 88%, var(--overlay-blue-soft) 0%, transparent 60%),
        linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
    --weather-border: 1px solid var(--gray-800);
    --weather-shadow: var(--shadow-panel);
    --weather-text: var(--gray-0);
    --weather-text-muted: var(--gray-300);
    --weather-accent: var(--blue-200);
    --weather-badge-bg: var(--overlay-blue-soft);
    --weather-badge-text: var(--gray-0);
    --weather-metric-bg: rgba(255, 255, 255, 0.03);
    --weather-metric-border: 1px solid var(--gray-800);
    --weather-icon-shadow: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}