:root {
  --code-max-height: 60rem;

/* --header-font-family: "DancingScript";
 * --body-font-family: "DancingScript";
 * --code-font-family: "DancingScript";
 */
}

/* Light mode theming (new, inspired by dark mode colors) */
:root,
:root[color-theme="light"] {
    --header-background: #E2E8F0; /* Light gray, derived from dark mode body font */
    --header-font-color: #0F172A; /* Very dark blue, from dark mode header background */

    --body-background: #F8FAFC; /* Near white, from dark mode header font */
    --body-font-color: #1E293B; /* Dark blue-gray, from dark mode body background */

    --mark-color: #94A3B8; /* Light blue-gray, from dark mode code copy font */

    --button-background: #475569; /* Medium blue-gray, from dark mode accent */
    --button-border-color: #7DD3FC; /* Light blue, from dark mode button border */

    --link-color: #38B8F8; /* Brighter blue, from dark mode footer link visited */
    --link-color-visited: #1E293B; /* Dark blue-gray, from dark mode body background */

    --code-background: #F8FAFC; /* Near white, from dark mode header font */
    --code-accent-color: #E2E8F0; /* Light gray, from dark mode body font */
    --code-accent-color-lite: #CBD5E1; /* Light gray-blue, from dark mode footer font */
    --code-font-color: #1F2937; /* Dark blue-gray, from dark mode code background */

    --code-copy-background: #E2E8F0; /* Light gray, from dark mode body font */
    --code-copy-font-color: #475569; /* Medium blue-gray, from dark mode accent */
    --code-copy-border-color: #94A3B8; /* Light blue-gray, from dark mode code copy font */
    --code-copy-success-color: #38B8F8; /* Brighter blue, from dark mode footer link visited */

    --accent-color: #475569; /* Medium blue-gray, from dark mode accent */
    --accent-color-lite: #94A3B8; /* Light blue-gray, from dark mode code copy font */

    --control-icons: #475569; /* Medium blue-gray, from dark mode accent */

    --footer-background: #E2E8F0; /* Light gray, derived from dark mode body font */
    --footer-font-color: #0F172A; /* Very dark blue, from dark mode header background */
    --footer-link-color: #7DD3FC; /* Light blue, from dark mode footer link */
    --footer-link-color-visited: #38B8F8; /* Brighter blue, from dark mode footer link visited */
}

@media (prefers-color-scheme: light) {
  :root {
    --header-background: #E2E8F0;
    --header-font-color: #0F172A;

    --body-background: #F8FAFC;
    --body-font-color: #1E293B;

    --mark-color: #94A3B8;

    --button-background: #475569;
    --button-border-color: #7DD3FC;

    --link-color: #38B8F8;
    --link-color-visited: #1E293B;

    --code-background: #F8FAFC;
    --code-accent-color: #E2E8F0;
    --code-accent-color-lite: #CBD5E1;
    --code-font-color: #1F2937;

    --code-copy-background: #E2E8F0;
    --code-copy-font-color: #475569;
    --code-copy-border-color: #94A3B8;
    --code-copy-success-color: #38B8F8;

    --accent-color: #475569;
    --accent-color-lite: #94A3B8;

    --control-icons: #475569;

    --footer-background: #E2E8F0;
    --footer-font-color: #0F172A;
    --footer-link-color: #7DD3FC;
    --footer-link-color-visited: #38B8F8;
  }
}

/* Dark mode theming (original, unchanged) */
:root[color-theme="dark"] {
    --header-background: #0F172A;
    --header-font-color: #F8FAFC;

    --body-background: #1E293B;
    --body-font-color: #E2E8F0;

    --mark-color: #475569;

    --button-background: #475569;
    --button-border-color: #7DD3FC;

    --link-color: #E2E8F0;
    --link-color-visited: #7DD3FC;

    --code-background: #1F2937;
    --code-accent-color: #334155;
    --code-accent-color-lite: #475569;
    --code-font-color: #E2E8F0;

    --code-copy-background: #1F2937;
    --code-copy-font-color: #94A3B8;
    --code-copy-border-color: #475569;
    --code-copy-success-color: #7DD3FC;

    --accent-color: #475569;
    --accent-color-lite: #475569;

    --control-icons: #94A3B8;

    --footer-background: #0F172A;
    --footer-font-color: #CBD5E1;
    --footer-link-color: #7DD3FC;
    --footer-link-color-visited: #38B8F8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --header-background: #0F172A;
    --header-font-color: #F8FAFC;

    --body-background: #1E293B;
    --body-font-color: #E2E8F0;

    --mark-color: #475569;

    --button-background: #475569;
    --button-border-color: #7DD3FC;

    --link-color: #E2E8F0;
    --link-color-visited: #7DD3FC;

    --code-background: #1F2937;
    --code-accent-color: #334155;
    --code-accent-color-lite: #475569;
    --code-font-color: #E2E8F0;

    --code-copy-background: #1F2937;
    --code-copy-font-color: #94A3B8;
    --code-copy-border-color: #475569;
    --code-copy-success-color: #7DD3FC;

    --accent-color: #475569;
    --accent-color-lite: #475569;

    --control-icons: #94A3B8;

    --footer-background: #0F172A;
    --footer-font-color: #CBD5E1;
    --footer-link-color: #7DD3FC;
    --footer-link-color-visited: #38B8F8;
  }
}