/* Dark theme - overrides the :root variables from light.css
   when the user's system prefers a dark color scheme.

   Palette vibe: deep water. Near-black navy, cool silver text,
   brighter royal blue for structural accents (more luminosity
   required for accents to register in dark mode). */

@media (prefers-color-scheme: dark) {
    :root {
        /* Surface + text */
        --color-bg: #0a0f1a;           /* near-black navy */
        --color-text: #c8d4e0;         /* cool silver */
        --color-text-strong: #e2eaf3;
        --color-text-muted: #8895a8;   /* steel */
        --color-text-subtle: #6b7888;
        --color-text-faint: #556474;

        /* Branding */
        --color-link-hover: #7fb3f5;   /* bright cyan-royal - accents need more luminosity in dark */
        --color-accent: #4a88d0;       /* royal, legible on near-black */
        --color-accent-bright: #7fb3f5;
        --color-focus: #7fb3f5;

        /* Rules / borders */
        --color-rule: #4a88d0;
        --color-rule-subtle: #1a2838;
        --color-border-form: #2a3848;

        /* Surfaces */
        --color-surface: #142030;
        --color-surface-alt: #142030;
        --color-surface-inner: #050811;
        --color-code-bg: #142030;

        /* Form inputs */
        --color-input-bg: #142030;
        --color-input-text: #e2eaf3;
    }

    /* Non-color behavior that only applies in dark mode */
    .dark-mode-commentary {
        display: initial;
    }

    /* Code highlighting - Dracula palette rotated toward cool cyan/teal/steel
       to stay in the "deep ocean" family. Same contrast levels, same readability,
       hue wheel shifted ~60 degrees cooler. */
    pre code.hljs {
        display: block;
        overflow-x: auto;
        padding: 1rem;
    }

    .hljs {
        background: #0d1623;                     /* slightly-raised abyss */
        color: #d4dde8;                          /* cool silver default */
    }

    /* Structural symbols - deep bright cyan */
    .hljs-built_in,
    .hljs-selector-tag,
    .hljs-section,
    .hljs-link {
        color: #6ad4e8;
    }

    /* Keywords - bright royal */
    .hljs-keyword {
        color: #5a9eff;
    }

    .hljs,
    .hljs-subst {
        color: #d4dde8;
    }

    /* Titles and attributes - soft seafoam */
    .hljs-title,
    .hljs-attr,
    .hljs-meta-keyword {
        font-style: italic;
        color: #7fd1b9;
    }

    /* Strings and data - pale cyan, the color of distant light through water */
    .hljs-string,
    .hljs-meta,
    .hljs-name,
    .hljs-type,
    .hljs-symbol,
    .hljs-bullet,
    .hljs-addition,
    .hljs-variable,
    .hljs-template-tag,
    .hljs-template-variable {
        color: #a8d8e8;
    }

    /* Comments - muted abyssal grey-blue */
    .hljs-comment,
    .hljs-quote,
    .hljs-deletion {
        color: #4a6278;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-literal,
    .hljs-title,
    .hljs-section,
    .hljs-doctag,
    .hljs-type,
    .hljs-name,
    .hljs-strong {
        font-weight: 600;
    }

    /* Numbers - deeper royal */
    .hljs-literal,
    .hljs-number {
        color: #8fb4ff;
    }

    .hljs-emphasis {
        font-style: italic;
    }
}

/* High-contrast variant - users who request increased contrast get
   pure black/white with bright accents. */
@media (prefers-contrast: more) {
    :root {
        --color-bg: black;
        --color-text: white;
        --color-text-strong: white;
        --color-text-muted: white;
        --color-text-subtle: white;
        --color-text-faint: white;
        --color-link-hover: #9cc5fb;
        --color-accent: #9cc5fb;
        --color-rule: white;
        --color-rule-subtle: white;
        --color-border-form: white;
        --color-surface: #333;
        --color-surface-alt: #333;
        --color-surface-inner: black;
        --color-code-bg: #333;
    }
}