@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

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

  --header-font-family: "Nunito", sans-serif;
  --body-font-family: "Nunito", sans-serif;
  --code-font-family: "JetBrains Mono", monospace;
}

/* Light mode theming (new, inspired by dark mode colors) */
:root,
:root[color-theme="light"] {
    --header-background: #2D3748;
    --header-font-color: #CBD5E1;

    --body-background: #1A202C;
    --body-font-color: #A0AEC0;

    --mark-color: #4A5568;

    --button-background: #4A5568;
    --button-border-color: #5A9FD4;

    --link-color: #5A9FD4;
    --link-color-visited: #7A8BA0;

    --code-background: #242D3A;
    --code-accent-color: #2D3748;
    --code-accent-color-lite: #374151;
    --code-font-color: #9CA3AF;

    --code-copy-background: #2D3748;
    --code-copy-font-color: #718096;
    --code-copy-border-color: #4A5568;
    --code-copy-success-color: #5A9FD4;

    --accent-color: #4A5568;
    --accent-color-lite: #4A5568;

    --control-icons: #5A9FD4;

    --footer-background: #2D3748;
    --footer-font-color: #A0AEC0;
    --footer-link-color: #5A9FD4;
    --footer-link-color-visited: #7A8BA0;
}

@media (prefers-color-scheme: light) {
  :root {
    --header-background: #2D3748;
    --header-font-color: #CBD5E1;

    --body-background: #1A202C;
    --body-font-color: #A0AEC0;

    --mark-color: #4A5568;

    --button-background: #4A5568;
    --button-border-color: #5A9FD4;

    --link-color: #5A9FD4;
    --link-color-visited: #7A8BA0;

    --code-background: #242D3A;
    --code-accent-color: #2D3748;
    --code-accent-color-lite: #374151;
    --code-font-color: #9CA3AF;

    --code-copy-background: #2D3748;
    --code-copy-font-color: #718096;
    --code-copy-border-color: #4A5568;
    --code-copy-success-color: #5A9FD4;

    --accent-color: #4A5568;
    --accent-color-lite: #4A5568;

    --control-icons: #5A9FD4;

    --footer-background: #2D3748;
    --footer-font-color: #A0AEC0;
    --footer-link-color: #5A9FD4;
    --footer-link-color-visited: #7A8BA0;
  }
}

/* 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;
  }
}