:root {
    /* Transition for theme changes */
    --theme-transition-duration: 0.5s;

    /* Base colors (fallback) */
    --modal-outside-bg: rgba(0, 0, 0, 0.88);

    --color-bg-bottom: #f2f2f2ff;
    --color-bg-top: #ffffff;
    --color-text: #1a1a1a;
    --color-primary: #3b82f6;
    --color-primary-opposite: #ffffff;
    --color-primary-transparent: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 90%, #ffffff 10%);
    --color-secondary: #64748b;
    --color-accent: #10b981;
    --color-accent-transparent: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --color-text-accent: color-mix(in srgb, var(--color-accent) 80%, #063);
    --color-error: #ef4444;
    --color-error-transparent: color-mix(in srgb, var(--color-error) 12%, transparent);
    --color-border: #cccccc;
    --color-border-hover: #dddddd;
    --color-bg-top-darker: #121212;
    --color-text-darker: #ffffff;
    --color-secondary-darker: #94a3b8;
    --color-border-darker: #374151;
    --color-page-view-header: #000000;
    --color-page-view-header-opposite: #ffffff;
    --hero-image-brightness: 1.0;

    /* Light mode */
    --color-bg-bottom-light: #f2f2f2ff;
    --color-bg-top-light: #ffffff;
    --color-bg-top-darker-light: #121212;
    --color-text-light: #1a1a1a;
    --color-primary-light: #3b82f6;
    --color-primary-opposite-light: #ffffff;
    --color-primary-transparent-light: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-primary-hover-light: color-mix(in srgb, var(--color-primary) 90%, #ffffff 10%);
    --color-secondary-light: #64748b;
    --color-accent-light: #10b981;
    --color-accent-transparent-light: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --color-text-accent-light: color-mix(in srgb, var(--color-accent) 80%, #063);
    --color-error-light: #ef4444;
    --color-error-transparent-light: color-mix(in srgb, var(--color-error) 12%, transparent);
    --color-border-light: #cccccc;
    --color-border-hover-light: #dddddd;
    --color-text-darker-light: #ffffff;
    --color-secondary-darker-light: #94a3b8;
    --color-border-darker-light: #374151;
    --hero-image-brightness-light: 1.0;

    /* Dark mode */
    --color-bg-bottom-dark: #0c0c0cff;
    --color-bg-top-dark: #121212;
    --color-bg-top-darker-dark: #000000;
    --color-text-dark: #e5e7eb;
    --color-primary-dark: #3b82f6;
    --color-primary-opposite-dark: #ffffffff;
    --color-primary-transparent-dark: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-primary-hover-dark: color-mix(in srgb, var(--color-primary) 90%, #ffffff 10%);
    --color-secondary-dark: #94a3b8;
    --color-accent-dark: #10b981;
    --color-accent-transparent-dark: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --color-text-accent-dark: color-mix(in srgb, var(--color-accent) 80%, #063);
    --color-error-dark: #ef4444;
    --color-error-transparent-dark: color-mix(in srgb, var(--color-error) 12%, transparent);
    --color-border-dark: #374151;
    --color-border-hover-dark: #5b6982ff;
    --color-text-darker-dark: #ffffff;
    --color-secondary-darker-dark: #94a3b8;
    --color-border-darker-dark: #374151;
    --hero-image-brightness-dark: 0.75;

    /* Admin chart */
    --admin-chart-posts: #2563eb;
    --admin-chart-comments: #f97316;
    --admin-chart-views: #10b981;
    --admin-chart-users: #8b5cf6;
    --admin-chart-surface: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-top) 94%);
    --admin-chart-grid-line: color-mix(in srgb, var(--color-border) 65%, transparent);
    --admin-chart-point-bg: var(--color-bg-top);
    --admin-chart-surface: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-top) 88%);
    --admin-chart-grid-line: color-mix(in srgb, var(--color-border) 45%, transparent);
    --admin-chart-point-bg: color-mix(in srgb, var(--color-bg-top) 70%, transparent);
    --admin-chart-axis-label: color-mix(
        in srgb,
        var(--color-secondary) 75%,
        var(--color-text) 25%
    );

    /* Typography */
    --font-family-base: "Outfit", "Inter", sans-serif;
    --font-family-admin: "Outfit", "Inter", sans-serif;
    --font-family-hero: "Rammetto One", sans-serif;

    /* Font sizes */
    --font-size-min: 0.5rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;

    /* Spacing and sizes */
    --size-min: 2px;
    --size-xs: 4px;
    --size-sm: 8px;
    --size-base: 16px;
    --size-mid: 32px;
    --size-md: 40px;
    --size-lg: 48px;
    --size-max: 64px;
    --size-max-lg: 96px;
    --size-max-xl: 128px;

    /* Layout */
    --header-height: var(--size-max);
    --common-gap: 8px;
    --page-max-width: 1000px;
    --page-side-padding: 16px;
}

/* Light theme override */
:root[data-theme="light"] {
    --color-bg-bottom: var(--color-bg-bottom-light);
    --color-bg-top: var(--color-bg-top-light);
    --color-bg-top-darker: var(--color-bg-top-darker-light);
    --color-text: var(--color-text-light);
    --color-primary: var(--color-primary-light);
    --color-primary-opposite: var(--color-primary-opposite-light);
    --color-primary-transparent: var(--color-primary-transparent-light);
    --color-primary-hover: var(--color-primary-hover-light);
    --color-secondary: var(--color-secondary-light);
    --color-accent: var(--color-accent-light);
    --color-accent-transparent: var(--color-accent-transparent-light);
    --color-text-accent: var(--color-text-accent-light);
    --color-error: var(--color-error-light);
    --color-error-transparent: var(--color-error-transparent-light);
    --color-border: var(--color-border-light);
    --color-border-hover: var(--color-border-hover-light);
    --color-text-darker: var(--color-text-darker-light);
    --color-secondary-darker: var(--color-secondary-darker-light);
    --color-border-darker: var(--color-border-darker-light);
    --hero-image-brightness: var(--hero-image-brightness-light);
}

/* Dark theme override */
:root[data-theme="dark"] {
    --color-bg-bottom: var(--color-bg-bottom-dark);
    --color-bg-top: var(--color-bg-top-dark);
    --color-bg-top-darker: var(--color-bg-top-darker-dark);
    --color-text: var(--color-text-dark);
    --color-primary: var(--color-primary-dark);
    --color-primary-opposite: var(--color-primary-opposite-dark);
    --color-primary-transparent: var(--color-primary-transparent-dark);
    --color-primary-hover: var(--color-primary-hover-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-accent: var(--color-accent-dark);
    --color-accent-transparent: var(--color-accent-transparent-dark);
    --color-text-accent: var(--color-text-accent-dark);
    --color-error: var(--color-error-dark);
    --color-error-transparent: var(--color-error-transparent-dark);
    --color-border: var(--color-border-dark);
    --color-border-hover: var(--color-border-hover-dark);
    --color-text-darker: var(--color-text-darker-dark);
    --color-secondary-darker: var(--color-secondary-darker-dark);
    --color-border-darker: var(--color-border-darker-dark);
    --hero-image-brightness: var(--hero-image-brightness-dark);
}

:root.theme-transition,
:root.theme-transition * {
    transition:
        background-color var(--theme-transition-duration) ease,
        color var(--theme-transition-duration) ease,
        border-color var(--theme-transition-duration) ease,
        fill var(--theme-transition-duration) ease,
        stroke var(--theme-transition-duration) ease,
        filter var(--theme-transition-duration) ease;
}