/* =========================================================
   System Dark Mode
   Automatically follows device appearance settings.
========================================================= */

@media (prefers-color-scheme: dark) {

    :root {
        --blue: #c2a45a;
        --blue-light: #ad9a66;
        --text: #ded9cd;
        --subtext: #aaa394;
        --background: #101010;
        --card: #1a1a19;
        --live2d-background: #141414;
        --border: #5e522d;
    }

    body {
        background: var(--background);
        color: var(--text);
    }

    /* Major surfaces use light/dark relief instead of a bright
       single-color outline. */
    .profile-card,
    .overview-card {
        background:
            linear-gradient(
                145deg,
                rgba(48, 48, 46, 0.94),
                rgba(21, 21, 20, 0.98)
            );
        color: var(--text);
        border-color: rgba(255, 255, 255, 0.055);
        box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, 0.095),
            inset -1px -1px 0 rgba(0, 0, 0, 0.62),
            inset 0 0 26px rgba(0, 0, 0, 0.10),
            0 16px 42px rgba(0, 0, 0, 0.34);
    }

    .profile-card::after,
    .overview-card::after {
        content: "";
        position: absolute;
        pointer-events: none;
        border-radius: inherit;
        box-shadow:
            inset 0 0 0 1px rgba(194, 164, 90, 0.055);
    }

    .profile-card::after {
        inset: 0;
    }

    .overview-card::after {
        inset: 0;
    }

    .intro,
    .oc-info-item,
    .oc-info-loading,
    .oc-info-error,
    .itinerary-card,
    .contact-dialog,
    .back-to-top {
        background:
            linear-gradient(
                145deg,
                rgba(43, 43, 41, 0.92),
                rgba(20, 20, 19, 0.97)
            );
        color: var(--text);
        border-color: rgba(157, 132, 68, 0.22);
        box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, 0.055),
            inset -1px -1px 0 rgba(0, 0, 0, 0.48),
            0 10px 30px rgba(0, 0, 0, 0.25);
    }

    /* Primary headings use a subdued gold. */
    .profile-card h1,
    .site-section-title,
    .overview-header h2,
    .overview-link-primary,
    .contact-dialog h2 {
        color: var(--blue);
    }

    /* Subheadings are intentionally much closer to white for contrast. */
    .site-section h3 {
        color: #e8e3d8;
    }

    /* Secondary/descriptive text keeps the warmer navigation-style gray. */
    .oc-info-label,
    .intro p,
    .live2d-description,
    .gallery-description,
    .itinerary-description,
    .contact-link-copy span,
    .contact-welcome,
    .subtitle,
    .update,
    .overview-kicker,
    .overview-link-secondary,
    .itinerary-location {
        color: #aaa394;
    }

    .oc-info-value,
    .itinerary-title,
    .contact-link-copy strong {
        color: var(--text);
    }

    .gallery-button,
    .site-star-button,
    .oc-info-toggle {
        background:
            linear-gradient(
                145deg,
                #282825,
                #1d1d1b
            );
        color: var(--text);
        border-color: rgba(157, 132, 68, 0.34);
        box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, 0.06),
            inset -1px -1px 0 rgba(0, 0, 0, 0.45);
    }

    .gallery-button:hover,
    .site-star-button:hover,
    .oc-info-toggle:hover {
        background:
            linear-gradient(
                145deg,
                #302f2b,
                #23221f
            );
        border-color: rgba(194, 164, 90, 0.58);
        color: var(--blue);
    }

    .site-star-button.is-starred {
        background: rgba(194, 164, 90, 0.12);
        color: var(--blue);
        border-color: rgba(194, 164, 90, 0.58);
    }

    /* Light-colored controls still use dark text for contrast. */
    .expand-contact-button {
        background: #c2a45a;
        color: #171717;
        border-color: #9d8444;
    }

    .live2d-control {
        border-color: rgba(157, 132, 68, 0.32);
        color: #27251f;
    }

    .live2d-control.camera {
        background: #d0b6ad;
    }

    .live2d-control.correction {
        background: #d5cfaa;
    }

    .live2d-control.star-eyes {
        background: #c4bfd4;
    }

    .control-status {
        color: #514b40;
    }

    /* Live2D explanatory text stays flat; no reflective/text-shadow effect. */
    .live2d-description {
        color: #b9b3a6;
        text-shadow: none;
        filter: none;
        mix-blend-mode: normal;
    }

    #live2d {
        background: var(--live2d-background);
        border-color: rgba(157, 132, 68, 0.25);
        box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, 0.045),
            inset -1px -1px 0 rgba(0, 0, 0, 0.48);
    }

    .overview-link:hover,
    .overview-link.is-active {
        color: var(--blue);
    }

    .overview-link-secondary {
        border-left-color: rgba(170, 163, 148, 0.30);
    }

    .overview-index {
        color: #999283;
    }

    .site-star-icon {
        fill: #ae913f;
    }

    body::before {
        opacity: 0.15;
    }

    footer {
        color: var(--subtext);
    }
}