:root {
    /* ── Tübingen brand (kept for legacy compatibility) ── */
    --tu-navy: #26323A;
    --tu-red:  #930D30;
    --tu-gold: #C2993E;
    --light-gold: #DAB156;
    --tu-gray: #f2f2f2;

    --box-shadow-1: 0 calc(2 / 16 * 1rem) calc(8 / 16 * 1rem) rgba(0, 0, 0, .08);

    /* ── Royale theme colours (kept for legacy) ── */
    --clr-first:      #4abdac;
    --clr-first-hl:   #58e3ce;
    --clr-second:     #FC4A1A;
    --clr-second-hl:  #c93b14;
    --clr-third:      #f7b733;
    --clr-third-hl:   #ffca34;
    --clr-fourth:     #dfdce3;
    --clr-fourth-hl:  #acaab0;

    /* ── Luna palette (kept — page CSS still references these) ── */
    --clr-luna-black:         #343434;
    --clr-luna-gray:          #a3aabb;
    --clr-luna-gray-dark:     #b4b4b4;
    --clr-luna-gray-light:    #f5f5f5;
    --clr-luna-gray-very-light: #fbfbfc;

    --clr-luna-white:         #fff;
    --clr-luna-blue:          #4194f6;
    --clr-luna-blue-light:    #a3cbfb;
    --clr-luna-blue-dark:     #1d4ed8;
    --clr-luna-red:           #f31d2f;
    --clr-luna-red-light:     #fa9aa2;
    --clr-luna-red-dark:      #b91c1c;
    --clr-luna-green:         #6bc950;
    --clr-luna-green-dark:    #46982f;
    --clr-luna-green-light:   #9fd689;
    --clr-luna-yellow:        #fccf03;
    --clr-luna-yellow-light:  #fde9ae;
    --clr-luna-purple:        #7b68ee;
    --clr-luna-purple-light:  #c4b5fd;
    --clr-luna-lilac:         #bf4acc;
    --clr-luna-orange:        #FFA500;

    --clr-luna-background:    #edf5ff;
    --clr-exercise-background: #edf5ff;

    /* ── Functional semantic colours ── */
    --correct:   #3d9900;
    --wrong:     #de1738;
    --error:     #ffb2ae;
    --success:   #C1E1C1;
    --tool_tip:  #c9c9c9;
    --white:     #ffffff;
    --whitish:   #f2f2f2;
    --black:     #000;
    --grey:      #bcbcbc;

    /* ── Legacy nav tokens (kept for any code that still reads them) ── */
    --nav-height:     60px;
    --nav-bg:         #ffffff;
    --nav-border:     #e2e8f0;

    /* ── Legacy text/bg tokens (kept for page CSS compat) ── */
    --clr-bg:               #f0f2f5;
    --clr-bg-card:          #ffffff;
    --clr-bg-sidebar:       #ffffff;
    --clr-border:           #e2e8f0;
    --clr-border-strong:    #cbd5e1;
    --clr-text-primary:     #0f172a;
    --clr-text-secondary:   #475569;
    --clr-text-muted:       #94a3b8;
    --clr-text-inverse:     #ffffff;

    /* ── Typography ── */
    --ff-primary:  'DM Sans', system-ui, sans-serif;
    --ff-body:     var(--ff-primary);
    --ff-heading:  var(--ff-primary);
    --font-main:   var(--ff-primary);
    --font-mono:   'DM Mono', 'Courier New', monospace;

    --fw-regular:   400;
    --fw-semi-bold: 500;
    --fw-bold:      700;

    --fs-300: 0.8125rem;
    --fs-400: 0.875rem;
    --fs-500: 0.9375rem;
    --fs-600: 1rem;
    --fs-700: 1.5rem;
    --fs-800: 1.875rem;
    --fs-900: 2.5rem;
    --fs-1000: 3.5rem;

    --fs-body:              var(--fs-400);
    --fs-primary-heading:   var(--fs-900);
    --fs-secondary-heading: var(--fs-800);
    --fs-third-heading:     var(--fs-700);
    --fs-fourth-heading:    var(--fs-500);
    --fs-title:             var(--fs-700);
    --fs-nav:               var(--fs-500);
    --fs-button:            var(--fs-300);

    /* ── Text scale aliases (used in layout.css + page CSS) ── */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  1.875rem;

    /* ── Spacing ── */
    --size-100: 0.25rem;
    --size-200: 0.5rem;
    --size-300: 0.75rem;
    --size-400: 1rem;
    --size-500: 1.5rem;
    --size-600: 2rem;
    --size-700: 3rem;
    --size-800: 4rem;
    --size-900: 5rem;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* ── Radius ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, .08);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, .10);
    --shadow-xl:  0 16px 40px rgba(0, 0, 0, .12);

    /* ── Transitions ── */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 350ms ease;

    /* ── Z-index layers ── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-nav:      300;
    --z-modal:    400;
    --z-toast:    500;

    /* ── Sidebar width (read by exercise_browser.css sticky calc) ── */
    --sidebar-width: 220px;
}

@media (min-width: 50em) {
    :root {
        --fs-body:              var(--fs-500);
        --fs-primary-heading:   var(--fs-900);
        --fs-secondary-heading: var(--fs-800);
        --fs-third-heading:     var(--fs-700);
        --fs-fourth-heading:    var(--fs-500);
        --fs-nav:               var(--fs-300);
    }
}

/* ── Utility classes (kept for template usage) ── */

.fw-bold      { font-weight: var(--fw-bold); }
.fw-semi-bold { font-weight: var(--fw-semi-bold); }
.fw-regular   { font-weight: var(--fw-regular); }

.fs-primary-heading   { font-size: var(--fs-primary-heading);   line-height: 1.1; }
.fs-secondary-heading { font-size: var(--fs-secondary-heading); line-height: 1.1; }
.fs-third-heading     { font-size: var(--fs-third-heading);     line-height: 1.1; }
.fs-fourth-heading    { font-size: var(--fs-fourth-heading);    line-height: 1.1; }
.fs-title             { font-size: var(--fs-title);             line-height: 1.1; }
.fs-300 { font-size: var(--fs-300); }
.fs-400 { font-size: var(--fs-400); }
.fs-500 { font-size: var(--fs-500); }
.fs-600 { font-size: var(--fs-600); }

.padding-block-900 { padding-block: var(--size-900); }
.padding-block-700 { padding-block: var(--size-700); }
.padding-block-600 { padding-block: var(--size-600); }
.padding-block-500 { padding-block: var(--size-500); }
.padding-block-400 { padding-block: var(--size-400); }

.display-sm-none { display: none; }

@media (min-width: 50em) {
    .display-md-inline-flex { display: inline-flex; }
}

.bg_first_clr  { background-color: var(--clr-first); }
.bg_second_clr { background-color: var(--clr-second); }
.bg_third_clr  { background-color: var(--clr-third); }
.bg_fourth_clr { background-color: var(--clr-fourth); }
.bg_gray_clr   { background-color: #f8f8f8; }
.bg_bottom     { background-color: var(--tu-gray); }
.bg_top        { background-color: var(--clr-first); }
.bg_uni        { background-color: white; }

.visually-hidden {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

p[data-width="wide"] { max-width: 50ch; }

.one-column  { display: grid; }

.even-columns {
    display: grid;
    gap: 1rem;
}

@media (min-width: 50em) {
    .even-columns {
        margin-top: 2em;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

.btn {
    display:          inline-flex;
    cursor:           pointer;
    text-decoration:  none;
    border:           0;
    border-radius:    1vmax;
    padding:          1.25em 2.5em;
    font-weight:      var(--fw-bold);
    font-size:        var(--fs-button);
    line-height:      1;
    color:            var(--whitish);
    background-color: var(--clr-first);
    box-shadow:       0 1.125em 1em -1em var(--clr-first-hl);
}

.btn:hover,
.btn:focus-visible {
    background-color: var(--clr-first-hl);
}

/* Footer nav */
.footer-nav { columns: 2; gap: clamp(var(--size-200), 30vw, var(--size-900)); }
.footer-nav a { color: var(--tu-red); text-decoration: none; }
.footer-nav a:is(:hover, :focus) { color: var(--tu-navy); }

.booking { padding-left: 4%; line-height: 1.9; }

html { scroll-behavior: smooth; }


/* ============================================================
   Night mode overrides
   Maps legacy --clr-bg-*, --clr-text-*, --clr-border tokens
   to dark values so existing page CSS responds to theme-night
   without any per-page changes.
   The sidebar is ALWAYS dark and is NOT listed here.
   ============================================================ */

html.theme-night {

    /* Page & card backgrounds */
    --clr-bg:               #0f172a;
    --clr-bg-card:          #1e293b;
    --clr-bg-sidebar:       #111827;
    --clr-luna-background:  #0f172a;
    --clr-exercise-background: #1e293b;
    --clr-luna-gray-very-light: #1e293b;
    --clr-luna-gray-light:  #243044;
    --clr-luna-white:       #1e293b;
    --white:                #1e293b;
    --whitish:              #243044;

    /* Borders */
    --clr-border:           #243044;
    --clr-border-strong:    #334155;
    --clr-luna-gray:        #334155;

    /* Text */
    --clr-text-primary:     #f1f5f9;
    --clr-text-secondary:   #94a3b8;
    --clr-text-muted:       #475569;
    --clr-luna-black:       #f1f5f9;
    --black:                #f1f5f9;

    /* html background */
    background-color: #0f172a;
}

/* Catch the html { background-color: #f8f9fa } rule from style_abstracts */
html.theme-night {
    background-color: #0f172a;
}