/* ==========================================================================
   Diplomax HRMS - design tokens

   Every colour, font, spacing and radius used by the interface is defined
   here as a custom property. Component and page stylesheets consume the
   tokens and never hard-code values.

   The default look is the Classical design (the "Classical design system
   intro" project, IUNET Dashboard v2): a charcoal sidebar with the current
   item as a gold pill, a cream page warming to gold in one corner, white
   cards with large radii, and Urbanist. The earlier palettes stay available
   in the theme drawer.

   The typefaces are served from this domain rather than from Google: an HR
   system behind a sign-in should not tell a third party who is looking at
   it, and a server that cannot reach the internet should still render
   properly. Urbanist and Nunito Sans are one variable file each per script
   range, so every weight costs one download.
   ========================================================================== */

@font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/urbanist-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Urbanist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/urbanist-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../../fonts/nunito-sans-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../../fonts/nunito-sans-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../fonts/jetbrains-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    /* Brand and interface colours: the Classical design.
       Charcoal for the shell and for ink, gold for what is current or
       waiting, a cream page. Gold is a fill colour, never a text colour on
       white (it fails contrast there), so text that wants the accent takes
       the dark gold of --color-accent and a gold fill takes charcoal ink.

       These repeat the Charcoal, Gold, Charcoal and Cream blocks further
       down rather than referring to them, because this is what renders
       before js/core/appearance.js has set a single attribute, and on a
       browser where it never runs at all. DEFAULTS in that file says the
       same four. Change one, change both. */
    --color-primary: #1f1f1f;
    --color-primary-strong: #111110;
    --color-primary-soft: #f4f2eb;
    --color-accent: #8a6d1a;
    --color-accent-mid: #f5c842;
    --color-accent-light: #fce38a;
    --color-accent-strong: #5c4810;
    --color-accent-soft: #fcefc2;
    --color-accent-tint: rgba(245, 200, 66, 0.16);
    --color-accent-line: rgba(212, 162, 30, 0.42);

    /* The second accent. Identity proposals, unread counts, the dot on the
       bell: anything that means somebody has to do something. */
    --color-accent2: #6b4f00;
    --color-accent2-mid: #d4a21e;
    --color-accent2-light: #f5c842;
    --color-accent2-tint: rgba(245, 200, 66, 0.16);
    --color-accent2-line: rgba(212, 162, 30, 0.42);

    /* A primary button is the accent with white ink, except where the accent
       is a light fill: Gold says so in its own block. */
    --btn-primary-bg: var(--color-accent);
    --btn-primary-ink: var(--color-text-inverse);
    --btn-primary-hover: var(--color-accent-strong);

    --color-bg: #f5f3ec;
    --page-gradient: linear-gradient(135deg, #edece8 0%, #f5f3ec 50%, #fbefc4 100%);
    --color-surface: #ffffff;
    --color-surface-muted: #f7f5ef;
    --color-surface-glass: rgba(255, 255, 255, 0.78);
    --color-border: #ece9e0;
    --color-border-strong: #dad6cb;

    --color-text: #1f1f1f;
    --color-text-muted: #6b6b66;
    --color-text-faint: #8a8a85;
    --color-text-inverse: #ffffff;

    /* The shell: a charcoal sidebar running the full height of the page, the
       current item a gold pill. The greys are white at an opacity so that a
       different sidebar colour from the drawer keeps them in proportion. */
    --side-bg: #1f1f1f;
    --side-ink: #ffffff;
    --side-ink-strong: rgba(255, 255, 255, 0.92);
    --side-ink-muted: rgba(255, 255, 255, 0.7);
    --side-ink-faint: rgba(255, 255, 255, 0.55);
    --side-hover: rgba(255, 255, 255, 0.07);
    --side-field: rgba(255, 255, 255, 0.06);
    --side-field-line: rgba(255, 255, 255, 0.1);
    --side-tree: rgba(255, 255, 255, 0.2);
    --side-active-bg: #f5c842;
    --side-active-ink: #1f1f1f;
    --side-active-shadow: 0 6px 18px rgba(245, 200, 66, 0.28);
    --side-mark-bg: #f5c842;
    --side-mark-ink: #1f1f1f;
    --side-badge-bg: #f5c842;
    --side-badge-ink: #1f1f1f;
    --side-width: 280px;
    --side-margin: 0px;
    --side-radius: 0px;
    --side-shadow: none;
    --side-gap: 280px;

    /* The six figure cards, each with its own tint, fill and ink. */
    --kpi-navy: #eceefe;
    --kpi-navy-line: #dcdffb;
    --kpi-navy-fill: #4f46e5;
    --kpi-navy-ink: #4f46e5;
    --kpi-blue: #e0f2fe;
    --kpi-blue-line: #c6e7fc;
    --kpi-blue-fill: #0369a1;
    --kpi-blue-ink: #0369a1;
    --kpi-violet: #ede9fe;
    --kpi-violet-line: #ddd5fd;
    --kpi-violet-fill: #6d28d9;
    --kpi-violet-ink: #6d28d9;
    --kpi-slate: #fef3c7;
    --kpi-slate-line: #fce8a4;
    --kpi-slate-fill: #b45309;
    --kpi-slate-ink: #b45309;
    --kpi-teal: #dcfce7;
    --kpi-teal-line: #c3f4d3;
    --kpi-teal-fill: #047857;
    --kpi-teal-ink: #047857;
    --kpi-amber: #fdf0f7;
    --kpi-amber-line: #fadaeb;
    --kpi-amber-fill: #db2777;
    --kpi-amber-ink: #db2777;

    /* The Classical chart colours: gold, charcoal, stone, bronze, in that
       order and never cycled. Each comes as a front, a darker side and a
       lighter top, because the design draws its bars and its ring in three
       dimensions. */
    --chart-1: #f5c842;
    --chart-1-side: #d4a21e;
    --chart-1-top: #fce38a;
    --chart-2: #2a2a28;
    --chart-2-side: #141413;
    --chart-2-top: #55554f;
    --chart-3: #dad6cb;
    --chart-3-side: #b4afa2;
    --chart-3-top: #f0eee7;
    --chart-4: #b07a3c;
    --chart-4-side: #8a5d2a;
    --chart-4-top: #d39c5c;
    --chart-floor: #f1eee5;

    --color-success: #059669;
    --color-success-soft: #d1fae5;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-info: #0284c7;
    --color-info-soft: #e0f2fe;
    --color-violet: #6d28d9;
    --color-violet-soft: #ede9fe;

    /* University accents, used for badges and scope indicators */
    /* Taken from the universities' own logos, not from the accent ramp.
       LIU is navy, IU is teal, EIU is purple - which is what they are, and
       does not change when somebody picks a different accent. Each passes
       4.5:1 both as ink on its own tint and as white on the solid. */
    --color-liu: #173f7d;
    --color-liu-soft: #e8ecf2;
    --color-iu: #0a6d80;
    --color-iu-soft: #e6f0f2;
    --color-eiu: #5b2d8e;
    --color-eiu-soft: #efeaf4;

    /* Typography */
    --font-sans: "Urbanist", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
    --font-mono: "JetBrains Mono", Consolas, "Cascadia Mono", "Courier New", monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* Spacing scale */
    --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;

    /* Shape and elevation */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(60, 45, 0, 0.04);
    --shadow: 0 1px 2px rgba(60, 45, 0, 0.04), 0 10px 30px rgba(60, 45, 0, 0.06);
    --shadow-lg: 0 20px 40px rgba(60, 45, 0, 0.14);

    /* Layout */
    --sidebar-width: 280px;
    --header-height: 60px;
    /* The content fills the page beside the sidebar, however wide the screen. */
    --content-max-width: none;
    --gutter: 1rem;

    /* Motion */
    --transition-fast: 120ms ease;
    --transition: 200ms ease;
    --ease-rise: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Focus ring, shared by every interactive element */
    --focus-ring: 0 0 0 3px var(--color-accent-soft), 0 0 0 5px var(--color-accent);
}

@media (min-width: 960px) {
    :root {
        --gutter: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition: 0ms;
    }
}

/* ==========================================================================
   Themes and layout variants

   The appearance is set on <html> by js/core/app.js from what the person
   chose, and remembered in their browser. Nothing here needs JavaScript to
   be readable: the light theme is the default and every variant only moves
   the same tokens.
   ========================================================================== */

/* Dark is a warm near-black rather than navy, so it sits under the Classical
   charcoal and gold, and under every other palette too. */
:root[data-theme="dark"] {
    --color-bg: #121211;
    --page-gradient: none;
    --color-surface: #1b1b1a;
    --color-surface-muted: #232321;
    --color-surface-glass: #1b1b1a;
    --color-border: #2e2d2a;
    --color-border-strong: #3b3a36;

    --color-text: #f2f1ec;
    --color-text-muted: #b5b3aa;
    --color-text-faint: #8c8a83;

    --color-primary: #2a2a28;
    --color-primary-soft: #262522;
    --color-accent: #f5c842;
    --color-accent-mid: #f5c842;
    --color-accent-light: #fce38a;
    --color-accent-strong: #fce38a;
    --color-accent-soft: rgba(245, 200, 66, 0.16);
    --color-accent-tint: rgba(245, 200, 66, 0.14);
    --color-accent-line: rgba(245, 200, 66, 0.34);

    --color-accent2: #f5c842;
    --color-accent2-mid: #d4a21e;
    --color-accent2-light: #fce38a;
    --color-accent2-tint: rgba(245, 200, 66, 0.16);
    --color-accent2-line: rgba(245, 200, 66, 0.34);

    --side-bg: #161615;
    --side-active-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    --side-shadow: none;

    --chart-2: #8a8a85;
    --chart-2-side: #6b6b66;
    --chart-2-top: #b5b3aa;
    --chart-3: #4a4945;
    --chart-3-side: #343330;
    --chart-3-top: #615f5a;
    --chart-floor: #262522;

    --kpi-navy: #201d4a;
    --kpi-navy-line: #2e2a66;
    --kpi-navy-fill: #6366f1;
    --kpi-navy-ink: #a5b4fc;
    --kpi-blue: #132635;
    --kpi-blue-line: #1d3a4f;
    --kpi-blue-fill: #2f8fd0;
    --kpi-blue-ink: #8bcdf2;
    --kpi-violet: #211d3f;
    --kpi-violet-line: #342d5c;
    --kpi-violet-fill: #8064d8;
    --kpi-violet-ink: #bfaeff;
    --kpi-slate: #2b2413;
    --kpi-slate-line: #43381c;
    --kpi-slate-fill: #d9930b;
    --kpi-slate-ink: #f0c063;
    --kpi-teal: #102b28;
    --kpi-teal-line: #1a423c;
    --kpi-teal-fill: #12907f;
    --kpi-teal-ink: #6fd3c2;
    --kpi-amber: #351028;
    --kpi-amber-line: #4d1a3a;
    --kpi-amber-fill: #ec4899;
    --kpi-amber-ink: #f9a8d4;

    --color-liu: #93b4e8;
    --color-liu-soft: rgba(23, 63, 125, 0.34);
    --color-iu: #6fc9db;
    --color-iu-soft: rgba(10, 109, 128, 0.34);
    --color-eiu: #c0a3e8;
    --color-eiu-soft: rgba(91, 45, 142, 0.36);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* How the sidebar sits on the page. Flush against the edge is the default
   now, so it is "inset" that has to put the margin and the radius back. */
:root[data-sidebar="inset"] {
    --side-margin: 16px;
    --side-radius: 24px;
    --side-shadow: 0 16px 38px rgba(31, 31, 31, 0.16);
    --side-gap: calc(var(--side-width) + 32px);
}

:root[data-sidebar="flush"] {
    --side-margin: 0px;
    --side-radius: 0px;
    --side-shadow: none;
    --side-gap: var(--side-width);
}

/* How wide the content runs, and how much of the sidebar shows. */
:root[data-layout="compact"] {
    --side-width: 76px;
    --side-gap: 76px;
}

:root[data-layout="compact"][data-sidebar="inset"] { --side-gap: 108px; }

/* ==========================================================================
   Appearance choices

   What a person picks in the theme drawer, kept in their own browser and
   applied by js/core/appearance.js as attributes on <html>. Nothing here
   needs JavaScript to be readable: leave every attribute off and the
   defaults above are what renders.

   Two rules about where these sit. The sidebar colours come AFTER the dark
   theme on purpose, so a chosen colour survives into dark mode - all of
   them are dark colours already, and somebody who picks Crimson means it.
   The ink and the page background are the opposite: they are lightness,
   not hue, so they are scoped away from dark mode, which sets its own.
   ========================================================================== */

/* --- sidebar colour ------------------------------------------------------ */
:root[data-sidebar-color="charcoal"] {
    --side-bg: #1f1f1f;
    --side-active-bg: #f5c842;
    --side-active-ink: #1f1f1f;
    --side-mark-bg: #f5c842;
    --side-mark-ink: #1f1f1f;
}

/* The coloured sidebars mark the current item with a white pill in the
   sidebar's own colour, as they always did. */
:root[data-sidebar-color="plum"],
:root[data-sidebar-color="indigo"],
:root[data-sidebar-color="navy"],
:root[data-sidebar-color="emerald"],
:root[data-sidebar-color="crimson"],
:root[data-sidebar-color="midnight"] {
    --side-active-bg: #ffffff;
    --side-active-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    --side-mark-bg: #ffffff;
}
:root[data-sidebar-color="plum"] {
    --side-bg: linear-gradient(135deg, #2a2580 0%, #3f1a7a 100%);
    --side-active-ink: #4338ca;
    --side-mark-ink: #4338ca;
}
:root[data-sidebar-color="indigo"] {
    --side-bg: linear-gradient(180deg, #4f46e5 0%, #3730a3 100%);
    --side-active-ink: #4f46e5;
    --side-mark-ink: #4f46e5;
}
:root[data-sidebar-color="navy"] {
    --side-bg: #1e3a8a;
    --side-active-ink: #1e3a8a;
    --side-mark-ink: #1e3a8a;
}
:root[data-sidebar-color="emerald"] {
    --side-bg: linear-gradient(180deg, #065f46 0%, #064e3b 100%);
    --side-active-ink: #047857;
    --side-mark-ink: #047857;
}
:root[data-sidebar-color="crimson"] {
    --side-bg: linear-gradient(180deg, #9f1239 0%, #701a3a 100%);
    --side-active-ink: #be123c;
    --side-mark-ink: #be123c;
}
:root[data-sidebar-color="midnight"] {
    --side-bg: #1e1b3a;
    --side-active-ink: #1e1b3a;
    --side-mark-ink: #1e1b3a;
}

/* --- accent ---------------------------------------------------------------
   Each accent carries a second one with it, for the things that are waiting
   on somebody. In dark mode the light end of the ramp becomes the accent,
   because the dark end is unreadable on a dark surface - which is the one
   thing the design file does not handle. */

/* Gold, the Classical accent. The gold itself is too light for text on
   white, so text and links take the dark gold and a primary button is a
   gold fill with charcoal ink, like "Open queue" in the design. With no
   attribute at all (before the script runs) Gold is what applies. */
:root:not([data-accent]),
:root[data-accent="gold"] {
    --btn-primary-bg: #f5c842;
    --btn-primary-ink: #1f1f1f;
    --btn-primary-hover: #ebb928;
}

:root:not([data-theme="dark"])[data-accent="gold"] {
    --color-accent: #8a6d1a;
    --color-accent-mid: #f5c842;
    --color-accent-light: #fce38a;
    --color-accent-strong: #5c4810;
    --color-accent-soft: #fcefc2;
    --color-accent-tint: rgba(245, 200, 66, 0.16);
    --color-accent-line: rgba(212, 162, 30, 0.42);
    --color-accent2: #6b4f00;
    --color-accent2-mid: #d4a21e;
    --color-accent2-light: #f5c842;
    --color-accent2-tint: rgba(245, 200, 66, 0.16);
    --color-accent2-line: rgba(212, 162, 30, 0.42);
}

:root[data-theme="dark"][data-accent="gold"] {
    --color-accent: #f5c842;
    --color-accent-mid: #f5c842;
    --color-accent-light: #fce38a;
    --color-accent-strong: #fce38a;
    --color-accent-soft: rgba(245, 200, 66, 0.16);
    --color-accent-tint: rgba(245, 200, 66, 0.14);
    --color-accent-line: rgba(245, 200, 66, 0.34);
    --color-accent2: #f5c842;
    --color-accent2-mid: #d4a21e;
    --color-accent2-light: #fce38a;
    --color-accent2-tint: rgba(245, 200, 66, 0.16);
    --color-accent2-line: rgba(245, 200, 66, 0.34);
}

:root:not([data-theme="dark"])[data-accent="indigo"] {
    --color-accent: #4f46e5;
    --color-accent-mid: #6366f1;
    --color-accent-light: #818cf8;
    --color-accent-strong: #4f46e5;
    --color-accent-soft: #eff0fe;
    --color-accent-tint: rgba(99, 102, 241, 0.1);
    --color-accent-line: rgba(99, 102, 241, 0.3);
    --color-accent2: #db2777;
    --color-accent2-mid: #ec4899;
    --color-accent2-light: #f472b6;
    --color-accent2-tint: rgba(236, 72, 153, 0.1);
    --color-accent2-line: rgba(236, 72, 153, 0.3);
}

:root[data-theme="dark"][data-accent="indigo"] {
    --color-accent: #818cf8;
    --color-accent-mid: #6366f1;
    --color-accent-light: #a7aefa;
    --color-accent-strong: #a7aefa;
    --color-accent-soft: rgba(99, 102, 241, 0.18);
    --color-accent-tint: rgba(99, 102, 241, 0.18);
    --color-accent-line: rgba(99, 102, 241, 0.34);
    --color-accent2: #f472b6;
    --color-accent2-mid: #ec4899;
    --color-accent2-light: #f79ccc;
    --color-accent2-tint: rgba(236, 72, 153, 0.18);
    --color-accent2-line: rgba(236, 72, 153, 0.34);
}
:root:not([data-theme="dark"])[data-accent="ocean"] {
    --color-accent: #0369a1;
    --color-accent-mid: #0ea5e9;
    --color-accent-light: #38bdf8;
    --color-accent-strong: #0369a1;
    --color-accent-soft: #e7f6fd;
    --color-accent-tint: rgba(14, 165, 233, 0.1);
    --color-accent-line: rgba(14, 165, 233, 0.3);
    --color-accent2: #b45309;
    --color-accent2-mid: #f59e0b;
    --color-accent2-light: #fbbf24;
    --color-accent2-tint: rgba(245, 158, 11, 0.1);
    --color-accent2-line: rgba(245, 158, 11, 0.3);
}

:root[data-theme="dark"][data-accent="ocean"] {
    --color-accent: #38bdf8;
    --color-accent-mid: #0ea5e9;
    --color-accent-light: #74d1fa;
    --color-accent-strong: #74d1fa;
    --color-accent-soft: rgba(14, 165, 233, 0.18);
    --color-accent-tint: rgba(14, 165, 233, 0.18);
    --color-accent-line: rgba(14, 165, 233, 0.34);
    --color-accent2: #fbbf24;
    --color-accent2-mid: #f59e0b;
    --color-accent2-light: #fcd266;
    --color-accent2-tint: rgba(245, 158, 11, 0.18);
    --color-accent2-line: rgba(245, 158, 11, 0.34);
}
:root:not([data-theme="dark"])[data-accent="emerald"] {
    --color-accent: #047857;
    --color-accent-mid: #10b981;
    --color-accent-light: #34d399;
    --color-accent-strong: #047857;
    --color-accent-soft: #e7f8f2;
    --color-accent-tint: rgba(16, 185, 129, 0.1);
    --color-accent-line: rgba(16, 185, 129, 0.3);
    --color-accent2: #be123c;
    --color-accent2-mid: #f43f5e;
    --color-accent2-light: #fb7185;
    --color-accent2-tint: rgba(244, 63, 94, 0.1);
    --color-accent2-line: rgba(244, 63, 94, 0.3);
}

:root[data-theme="dark"][data-accent="emerald"] {
    --color-accent: #34d399;
    --color-accent-mid: #10b981;
    --color-accent-light: #71e0b8;
    --color-accent-strong: #71e0b8;
    --color-accent-soft: rgba(16, 185, 129, 0.18);
    --color-accent-tint: rgba(16, 185, 129, 0.18);
    --color-accent-line: rgba(16, 185, 129, 0.34);
    --color-accent2: #fb7185;
    --color-accent2-mid: #f43f5e;
    --color-accent2-light: #fc9caa;
    --color-accent2-tint: rgba(244, 63, 94, 0.18);
    --color-accent2-line: rgba(244, 63, 94, 0.34);
}
:root:not([data-theme="dark"])[data-accent="sunset"] {
    --color-accent: #c2410c;
    --color-accent-mid: #f97316;
    --color-accent-light: #fb923c;
    --color-accent-strong: #c2410c;
    --color-accent-soft: #fef1e8;
    --color-accent-tint: rgba(249, 115, 22, 0.1);
    --color-accent-line: rgba(249, 115, 22, 0.3);
    --color-accent2: #6d28d9;
    --color-accent2-mid: #8b5cf6;
    --color-accent2-light: #a78bfa;
    --color-accent2-tint: rgba(139, 92, 246, 0.1);
    --color-accent2-line: rgba(139, 92, 246, 0.3);
}

:root[data-theme="dark"][data-accent="sunset"] {
    --color-accent: #fb923c;
    --color-accent-mid: #f97316;
    --color-accent-light: #fcb376;
    --color-accent-strong: #fcb376;
    --color-accent-soft: rgba(249, 115, 22, 0.18);
    --color-accent-tint: rgba(249, 115, 22, 0.18);
    --color-accent-line: rgba(249, 115, 22, 0.34);
    --color-accent2: #a78bfa;
    --color-accent2-mid: #8b5cf6;
    --color-accent2-light: #c1aefc;
    --color-accent2-tint: rgba(139, 92, 246, 0.18);
    --color-accent2-line: rgba(139, 92, 246, 0.34);
}
:root:not([data-theme="dark"])[data-accent="slate"] {
    --color-accent: #1e293b;
    --color-accent-mid: #475569;
    --color-accent-light: #94a3b8;
    --color-accent-strong: #1e293b;
    --color-accent-soft: #edeef0;
    --color-accent-tint: rgba(71, 85, 105, 0.1);
    --color-accent-line: rgba(71, 85, 105, 0.3);
    --color-accent2: #0369a1;
    --color-accent2-mid: #0ea5e9;
    --color-accent2-light: #38bdf8;
    --color-accent2-tint: rgba(14, 165, 233, 0.1);
    --color-accent2-line: rgba(14, 165, 233, 0.3);
}

:root[data-theme="dark"][data-accent="slate"] {
    --color-accent: #94a3b8;
    --color-accent-mid: #475569;
    --color-accent-light: #b4bfcd;
    --color-accent-strong: #b4bfcd;
    --color-accent-soft: rgba(71, 85, 105, 0.18);
    --color-accent-tint: rgba(71, 85, 105, 0.18);
    --color-accent-line: rgba(71, 85, 105, 0.34);
    --color-accent2: #38bdf8;
    --color-accent2-mid: #0ea5e9;
    --color-accent2-light: #74d1fa;
    --color-accent2-tint: rgba(14, 165, 233, 0.18);
    --color-accent2-line: rgba(14, 165, 233, 0.34);
}

/* --- text colour ---------------------------------------------------------- */
:root:not([data-theme="dark"])[data-ink="charcoal"] {
    --color-text: #1f1f1f;
    --color-text-muted: #6b6b66;
    --color-text-faint: #8a8a85;
}
:root:not([data-theme="dark"])[data-ink="plum"] { --color-text: #1e1b3a; --color-text-muted: #6b7090; --color-text-faint: #9094ad; }
:root:not([data-theme="dark"])[data-ink="slate"] { --color-text: #1e293b; --color-text-muted: #64748b; --color-text-faint: #94a3b8; }
:root:not([data-theme="dark"])[data-ink="black"] { --color-text: #111111; }
:root:not([data-theme="dark"])[data-ink="navy"] { --color-text: #172554; --color-text-muted: #64748b; --color-text-faint: #94a3b8; }

/* --- page background ------------------------------------------------------
   Cream carries the Classical gradient and warm rules; the cooler pages put
   back the cool rules they were drawn with. */
:root:not([data-theme="dark"])[data-page="cream"] {
    --color-bg: #f5f3ec;
    --page-gradient: linear-gradient(135deg, #edece8 0%, #f5f3ec 50%, #fbefc4 100%);
    --color-surface-muted: #f7f5ef;
    --color-border: #ece9e0;
    --color-border-strong: #dad6cb;
}
:root:not([data-theme="dark"])[data-page="cool"] {
    --color-bg: #f5f6fb;
    --page-gradient: none;
    --color-surface-muted: #f7f8fc;
    --color-border: #e6e8f2;
    --color-border-strong: #d5d8e8;
}
:root:not([data-theme="dark"])[data-page="warm"] { --color-bg: #f7f5f1; --page-gradient: none; }
:root:not([data-theme="dark"])[data-page="white"] { --color-bg: #ffffff; --page-gradient: none; --color-surface-glass: #ffffff; }
:root:not([data-theme="dark"])[data-page="mist"] {
    --color-bg: #eef2f6;
    --page-gradient: none;
    --color-surface-muted: #f5f7fa;
    --color-border: #e1e6ee;
    --color-border-strong: #cfd6e2;
}