:root {
    --site-header-height: 0px;
    --lesson-header-height: 0px;

    /* Core palette */
    --color-black: #000;
    --color-white: #fff;
    --color-transparent: transparent;

    /* General application gray shades */
    --color-gray: #aaa;
    --color-gray-light: #f3f3f3;
    --color-gray-dark: #555;

    /* Brand / accent */
    --color-accent: #f7c800;
    --color-accent-hover: #f7d335;
    --color-accent-border: #be9d0a;
    --color-accent-bright: #ffe36e;
    --color-accent-soft: #fffaf0;

    /* Semantic colors */
    --top-menu-bg: #000;
    --top-menu-border: var(--color-accent);
    --top-menu-text: #f0f0f0;
    --top-menu-hover-text: #f0f0f0;
    --top-menu-hover-bg: #444;
    --top-menu-selected-text: #fff;
    --top-menu-selected-bg: #000;

    --color-text: var(--color-black);
    --color-text-inverse: var(--color-white);
    --color-text-muted: var(--color-gray-dark);
    --color-border: #d3d3d3;

    --color-button-bg: var(--color-accent);
    --color-button-border: var(--color-accent-border);
    --color-button-text: #000;
    --color-button-hover-mix: white;    /* Use black to darken, white to lighten. */

    --color-secbutton-bg: var(--color-white);
    --color-secbutton-border: var(--color-accent-border);
    --color-secbutton-text: var(--color-black);
    --color-secbutton-hover-mix: black;    /* Use black to darken, white to lighten. */


    --color-surface: var(--color-white);

    --color-success: #176c27;
    --color-success-light: #edf8ef;

    --color-error: #9d1830;
    --color-error-medium: #efb9c2;
    --color-error-light: #fcecef;

    --color-info: #2d61cf;

    /* Lesson view word colors */
    --color-word-new: #e3ebfc;
    --color-word-learn: #fafaba;

    /* Word edit panel background */
    --color-panel-bg: #f9f9f9;

    /* Flashcards */

    --anki-gender-accent-default: #8d99a6;
    --anki-gender-surface-default: #f7f8f9;

    --anki-gender-accent-masc: #3284c6;
    --anki-gender-surface-masc: #edf7ff;

    --anki-gender-accent-fem: #cf4c83;
    --anki-gender-surface-fem: #fff0f6;

    --anki-gender-accent-neuter: #438f56;
    --anki-gender-surface-neuter: #eff9f1;

    /* Shadows and translucent surfaces */
    --shadow-soft: rgba(0, 0, 0, 0.12);
    --shadow-medium: rgba(0, 0, 0, 0.20);
    --shadow-strong: rgba(0, 0, 0, 0.24);
    --overlay-border: rgba(0, 0, 0, 0.18);
    --overlay-modal: rgba(0, 0, 0, 0.40);
    --overlay-ring: rgba(0, 0, 0, 0.72);
    --overlay-light-subtle: rgba(255, 255, 255, 0.08);
    --overlay-light-highlight: rgba(255, 255, 255, 0.35);
    --overlay-control: rgba(255, 255, 255, 0.82);
    --overlay-control-hover: rgba(255, 255, 255, 0.96);

    /* SVG images are variables because CSS custom properties cannot be interpolated inside data-URI SVG markup */
    --select-arrow-image: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    --checkbox-checked-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --radio-checked-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");

    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}