/*
 * Color tokens: every site color is defined here by role, and component
 * stylesheets refer to these names instead of literal values. Each token is
 * light-dark(light value, dark value).
 *
 * The page follows the system theme; data-theme on <html> overrides it.
 *
 * Base palette: warm paper by day, warm charcoal by night. The neutrals carry
 * no hue of their own so that any accent fits.
 */
:root {
    color-scheme: light dark;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

:root {
    /* Page and surfaces */
    --bg: light-dark(#f7f5f0, #1c1b19);
    --surface-nav: light-dark(rgba(253, 252, 249, 0.92), rgba(37, 35, 32, 0.95));
    --surface-popover: light-dark(#fdfcf9, #252320);
    --surface-panel: linear-gradient(
        180deg,
        light-dark(#fdfcf9, rgba(37, 35, 32, 0.82)) 0%,
        light-dark(#fbf9f5, rgba(32, 30, 27, 0.72)) 100%
    );
    --surface-card: light-dark(rgba(242, 239, 232, 0.6), rgba(28, 26, 24, 0.7));
    --surface-subtle: light-dark(rgba(60, 50, 30, 0.03), rgba(255, 248, 235, 0.03));
    --surface-sunken: light-dark(rgba(60, 50, 30, 0.05), rgba(12, 11, 9, 0.35));
    --surface-pill: light-dark(rgba(60, 50, 30, 0.06), rgba(255, 248, 235, 0.08));
    /*
     * Hover fill for quiet top-bar controls: --surface-pill over the bar,
     * made opaque because a dock step's label slides over the date beneath.
     */
    --surface-hover: light-dark(#f1f0ec, #36342f);
    /* Used under color-scheme: dark, so only one value. */
    --surface-lightbox: rgba(14, 13, 11, 0.94);
    --backdrop: rgba(0, 0, 0, 0.5);

    /* Borders and rules */
    --border-subtle: light-dark(rgba(60, 50, 30, 0.08), rgba(255, 245, 230, 0.06));
    --border: light-dark(rgba(60, 50, 30, 0.12), rgba(255, 245, 230, 0.1));
    --border-strong: light-dark(rgba(60, 50, 30, 0.2), rgba(255, 245, 230, 0.16));
    --border-rail: light-dark(rgba(106, 102, 94, 0.3), rgba(162, 157, 146, 0.3));

    /* Text, from most to least prominent */
    --text-strong: light-dark(#16150f, #f6f3ec);
    --text-heading: light-dark(#1d1c18, #f0ece4);
    --text-emphasis: light-dark(#24231f, #e9e5dc);
    --text: light-dark(#2a2925, #e3dfd6);
    --text-prose: light-dark(#34322d, #d9d4ca);
    --text-soft: light-dark(#4f4c45, #c3beb4);
    --text-muted: light-dark(#6a665e, #a29d92);
    --text-subtle: light-dark(#6f6b63, #99948a);
    --text-faint: light-dark(#a8a398, #6b675f);

    /*
     * Two accents, after the Genshin 6.1 event screens: amber marks content
     * worth noticing (brand mark, links, highlights); pine marks where you
     * are and what responds to you (current page, selection, hover, focus).
     */
    --accent: light-dark(#9a5f0e, #e3a548);
    --accent-hover: light-dark(#7e4c08, #f0c27a);
    --accent-soft: light-dark(rgba(154, 95, 14, 0.9), rgba(227, 165, 72, 0.9));
    --accent-line: light-dark(rgba(154, 95, 14, 0.35), rgba(227, 165, 72, 0.3));
    --accent-line-strong: light-dark(rgba(154, 95, 14, 0.55), rgba(227, 165, 72, 0.5));

    --current: light-dark(#2e6b5e, #72b8a6);
    --current-wash: light-dark(rgba(46, 107, 94, 0.06), rgba(114, 184, 166, 0.06));
    --current-tint: light-dark(rgba(46, 107, 94, 0.1), rgba(114, 184, 166, 0.1));
    --current-tint-strong: light-dark(rgba(46, 107, 94, 0.14), rgba(114, 184, 166, 0.15));
    --current-border-faint: light-dark(rgba(46, 107, 94, 0.2), rgba(114, 184, 166, 0.2));

    /*
     * Brand mark: the full moon of the 6.1 event art. At night it glows; on
     * paper it is gilded, with a thin halo ring in place of the glow.
     */
    --moon: light-dark(#b8781c, #e3a548);
    --moon-ring: light-dark(rgba(184, 120, 28, 0.55), transparent);
    --moon-glow: light-dark(transparent, rgba(227, 165, 72, 0.4));

    /* Code */
    --code-bg: light-dark(#f0ece3, #2a2824);
    --code-inline-bg: light-dark(rgba(60, 50, 30, 0.06), rgba(255, 245, 230, 0.07));
    --code-inline-text: light-dark(#2f2c26, #ece7dd);
    --code-button-bg: light-dark(rgba(253, 252, 249, 0.85), rgba(20, 19, 17, 0.72));

    /* Syntax highlighting: One Light by day, One Dark by night */
    --syntax-text: light-dark(#383a42, #abb2bf);
    --syntax-comment: light-dark(#7c7a73, #7f848e);
    --syntax-keyword: light-dark(#a626a4, #c678dd);
    --syntax-name: light-dark(#c8453a, #e06c75);
    --syntax-string: light-dark(#3e7f3d, #98c379);
    --syntax-number: light-dark(#8f5e00, #d19a66);
    --syntax-type: light-dark(#8a6100, #e5c07b);
    --syntax-function: light-dark(#2f63d6, #61afef);
    --syntax-operator: light-dark(#00769e, #56b6c2);

    /* Status */
    --success-bg: light-dark(rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.18));
    --success-border: light-dark(rgba(22, 163, 74, 0.45), rgba(34, 197, 94, 0.45));
    --success-text: light-dark(#166534, #dcfce7);

    /* Admonitions */
    --admonition-warning-title: light-dark(#c2410c, #fb923c);
    --admonition-warning-rail: light-dark(rgba(234, 88, 12, 0.6), rgba(251, 146, 60, 0.75));
    --admonition-caution-title: light-dark(#b91c1c, #f87171);
    --admonition-caution-rail: light-dark(rgba(220, 38, 38, 0.55), rgba(248, 113, 113, 0.7));

    /* Shadows */
    --shadow-color-faint: light-dark(rgba(60, 50, 30, 0.05), rgba(0, 0, 0, 0.08));
    --shadow-color: light-dark(rgba(60, 50, 30, 0.08), rgba(0, 0, 0, 0.18));
    --shadow-color-strong: light-dark(rgba(60, 50, 30, 0.14), rgba(0, 0, 0, 0.3));
}