/*
 * Theme "Nowoczesny" (data-theme="modern", the default). Two faces:
 *  - the teacher's part: smooth and calm – Inter, white cards with soft shadows, a violet-blue gradient;
 *  - the children's part (body.area-learn: Nauka, games, the student's duel): a school notebook – Nunito, squared paper,
 *    chunky buttons that press down like keys.
 * Everything clickable answers the pointer: it lifts, changes its frame or background on hover and moves back when left.
 * Every rule is scoped to [data-theme^="modern"], so the other themes stay as they were.
 */

/* ---------------------------------------------------------------- colours (light) */
[data-theme="modern"] {
    --app-bg: #f6f7fb;
    --app-surface: #ffffff;
    --app-surface-2: #f8f9fd;
    --app-border: #e6e8f0;
    --app-nav-bg: linear-gradient(90deg, #5b3df5 0%, #2563eb 100%);
    --app-logo: #ffffff;
    --app-primary: #5b3df5;
    --app-primary-hover: #4a2ee0;
    --app-primary-fg: #ffffff;
    --app-primary-text: #5034e0;
    --app-primary-rgb: 91, 61, 245;
    --app-selected-row: #f1eeff;
    --app-correct: #0f8a5f;
    --app-line: #a3a8bd;
    --app-overlay: rgba(255, 255, 255, .78);
    --app-row-error: #fff1f1;
    --app-row-warning: #fff8eb;
    --app-hero-1: #5b3df5;
    --app-hero-2: #2563eb;
    --app-hero-glow: #8b74ff;
    --app-happy-bg: #ecfaf3;
    --app-happy-border: #bfe9d4;
    --app-scared-bg: #fff0ef;
    --app-scared-border: #ffd0cb;
    --app-heading-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-link-color-rgb: 80, 52, 224;
    --bs-link-hover-color-rgb: 61, 34, 190;
    --bs-border-radius: .65rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --modern-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
    --modern-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 32px rgba(16, 24, 40, .12);
    --modern-tint: #f3f0ff;
    --modern-frame: #e3e5ef;
    --modern-field: #8d93ab;
    --modern-btn-bg: #ffffff;
    --modern-row-hover: var(--modern-row-hover);
    --modern-th: #6b7088;
    --modern-pill: #f1f2f8;
    --modern-hover-frame: var(--modern-hover-frame);
    --modern-primary-frame: #d9d2fd;
    --modern-danger-frame: #f3c4c4;
    --modern-danger-tint: #fff0f0;
    --modern-danger-ink: #c22d2d;
    --modern-danger-hover-frame: #e35d5d;
    --modern-success-frame: #bfe6d3;
    --modern-success-tint: #ecfaf3;
    --modern-success-ink: #0f7a52;
    --modern-success-hover-frame: #2fb37c;
    --modern-focus: #5b3df5;
    --modern-ink: #3a3f5c;
}

[data-theme^="modern"] h1,
[data-theme^="modern"] h2,
[data-theme^="modern"] h3 {
    letter-spacing: -.015em;
}

/* ---------------------------------------------------------------- the top bar */
[data-theme^="modern"] .app-navbar {
    box-shadow: 0 4px 18px rgba(61, 60, 200, .18);
}

[data-theme^="modern"] .app-navbar {
    /* Bootstrap's dark bar dims its links to 55 %: on the gradient that is under 3:1. */
    --bs-navbar-color: rgba(255, 255, 255, .92);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
}

[data-theme^="modern"] .app-navbar .nav-link {
    border-radius: .55rem;
    transition: background-color .15s, color .15s;
}

[data-theme^="modern"] .app-navbar .nav-link:hover,
[data-theme^="modern"] .app-navbar .nav-link:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

[data-theme^="modern"] .app-navbar .nav-link.active {
    background: rgba(255, 255, 255, .22);
}

/* ---------------------------------------------------------------- cards and tables */
[data-theme^="modern"] .card {
    --bs-card-border-color: transparent;
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-bg: var(--app-surface);
    box-shadow: var(--modern-shadow) !important;
}

[data-theme^="modern"] .card-header {
    border-bottom-color: var(--app-border);
}

/* A card that is a link (or holds the link over all of it) rises under the pointer. */
[data-theme^="modern"] a.card,
[data-theme^="modern"] .card:has(.stretched-link),
[data-theme^="modern"] .landing-feature {
    transition: transform .15s ease, box-shadow .15s ease;
}

[data-theme^="modern"] a.card:hover,
[data-theme^="modern"] .card:has(.stretched-link):hover {
    transform: translateY(-3px);
    box-shadow: var(--modern-shadow-hover) !important;
}

[data-theme^="modern"] .table {
    --bs-table-hover-bg: var(--modern-row-hover);
}

[data-theme^="modern"] .table > tbody > tr {
    transition: background-color .12s;
}

[data-theme^="modern"] .table > tbody > tr:hover > * {
    background-color: var(--modern-row-hover);
}

[data-theme^="modern"] .table > thead th {
    color: var(--modern-th);
    font-weight: 600;
}

[data-theme^="modern"] .badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .35em .7em;
}

/* ---------------------------------------------------------------- buttons */
[data-theme^="modern"] .btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: .75rem;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .12s;
}

[data-theme^="modern"] .btn-sm {
    --bs-btn-border-radius: .55rem;
}

[data-theme^="modern"] .btn-lg {
    --bs-btn-border-radius: .9rem;
}

/* Every button lifts a little under the pointer and settles when pressed. */
[data-theme^="modern"] .btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
}

[data-theme^="modern"] .btn:active:not(:disabled):not(.disabled) {
    transform: translateY(0);
}

[data-theme^="modern"] .btn-primary {
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(90deg, #5b3df5, #2563eb);
    box-shadow: 0 6px 16px rgba(91, 61, 245, .28);
}

[data-theme^="modern"] .btn-primary:hover {
    background-image: linear-gradient(90deg, #4a2ee0, #1d4ed8);
    box-shadow: 0 9px 22px rgba(91, 61, 245, .38);
}

[data-theme^="modern"] .btn-success,
[data-theme^="modern"] .btn-danger,
[data-theme^="modern"] .btn-warning,
[data-theme^="modern"] .btn-secondary {
    box-shadow: 0 4px 12px rgba(16, 24, 40, .14);
}

[data-theme^="modern"] .btn-success:hover,
[data-theme^="modern"] .btn-danger:hover,
[data-theme^="modern"] .btn-warning:hover,
[data-theme^="modern"] .btn-secondary:hover {
    box-shadow: 0 7px 18px rgba(16, 24, 40, .2);
}

/* Outline buttons: white with a light frame; under the pointer the frame and the text take the colour and a tint fills them. */
[data-theme^="modern"] .btn-outline-primary {
    --bs-btn-color: var(--app-primary-text);
    --bs-btn-bg: var(--modern-btn-bg);
    --bs-btn-border-color: var(--modern-primary-frame);
    --bs-btn-hover-color: var(--app-primary-text);
    --bs-btn-hover-bg: var(--modern-tint);
    --bs-btn-hover-border-color: var(--app-primary);
}

[data-theme^="modern"] .btn-outline-secondary {
    --bs-btn-color: var(--modern-ink);
    --bs-btn-bg: var(--modern-btn-bg);
    --bs-btn-border-color: var(--modern-frame);
    --bs-btn-hover-color: var(--app-primary-text);
    --bs-btn-hover-bg: var(--modern-tint);
    --bs-btn-hover-border-color: var(--modern-hover-frame);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--modern-ink);
    --bs-btn-active-border-color: var(--modern-ink);
}

[data-theme^="modern"] .btn-outline-danger {
    --bs-btn-bg: var(--modern-btn-bg);
    --bs-btn-border-color: var(--modern-danger-frame);
    --bs-btn-hover-color: var(--modern-danger-ink);
    --bs-btn-hover-bg: var(--modern-danger-tint);
    --bs-btn-hover-border-color: var(--modern-danger-hover-frame);
}

[data-theme^="modern"] .btn-outline-success {
    --bs-btn-bg: var(--modern-btn-bg);
    --bs-btn-border-color: var(--modern-success-frame);
    --bs-btn-hover-color: var(--modern-success-ink);
    --bs-btn-hover-bg: var(--modern-success-tint);
    --bs-btn-hover-border-color: var(--modern-success-hover-frame);
}

[data-theme^="modern"] .btn[class*="btn-outline-"]:hover:not(:disabled):not(.disabled) {
    box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
}

/* Row actions in tables: soft grey pills until pointed at. */
[data-theme^="modern"] .table .btn-sm[class*="btn-outline-"]:not(:hover):not(:focus-visible):not(:active) {
    --bs-btn-bg: var(--modern-pill);
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--modern-ink);
}

/* The chosen option of a group (radio / checkbox drawn as buttons) is filled. */
[data-theme^="modern"] .btn-check:checked + .btn-outline-primary,
[data-theme^="modern"] .btn-check:checked + .btn-outline-secondary {
    box-shadow: 0 4px 12px rgba(91, 61, 245, .22);
}

/* ---------------------------------------------------------------- links, menus, forms */
[data-theme^="modern"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.card):not([class*="learn-"]):not(.list-group-item) {
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    transition: color .12s, text-decoration-thickness .12s;
}

[data-theme^="modern"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.card):not([class*="learn-"]):not(.list-group-item):hover {
    text-decoration-thickness: 2px;
}

[data-theme^="modern"] .dropdown-menu {
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-border-radius: .85rem;
    --bs-dropdown-link-hover-bg: var(--modern-tint);
    --bs-dropdown-link-hover-color: var(--app-primary-text);
    padding: .4rem;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
}

[data-theme^="modern"] .dropdown-item {
    border-radius: .55rem;
    transition: background-color .12s, color .12s, padding-left .12s;
}

[data-theme^="modern"] .dropdown-item:hover:not(.active) {
    padding-left: 1.2rem;
}

[data-theme^="modern"] .list-group-item-action {
    transition: background-color .12s, padding-left .12s;
}

[data-theme^="modern"] .list-group-item-action:hover {
    background-color: var(--modern-tint);
    padding-left: 1.25rem;
}

[data-theme^="modern"] .form-control,
[data-theme^="modern"] .form-select {
    border-color: var(--modern-field);
    border-radius: .65rem;
    transition: border-color .15s, box-shadow .15s;
}

[data-theme^="modern"] .form-control:hover:not(:focus):not(:disabled),
[data-theme^="modern"] .form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--modern-hover-frame);
}

[data-theme^="modern"] .form-check-input {
    transition: border-color .12s, box-shadow .12s;
}

[data-theme^="modern"] .form-check-input:hover:not(:disabled) {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .12);
}

[data-theme^="modern"] .page-link {
    transition: background-color .12s, color .12s;
}

/* ---------------------------------------------------------------- the children's part: a school notebook */
[data-theme^="modern"] body.area-learn {
    --bs-body-font-family: 'Nunito', system-ui, sans-serif;
    --app-heading-font: 'Nunito', system-ui, sans-serif;
    --kid-ink: #24324a;           /* text and frames */
    --kid-base: #24324a;          /* the "base" under the buttons and cards */
    --kid-on-yellow: #24324a;
    --kid-paper: #fffdf6;
    --kid-grid: #e3eef9;
    --kid-surface: #ffffff;
    --kid-teal: #2bb3a3;          /* decoration only (shadows, stripes) */
    --kid-teal-strong: #0e7c70;   /* behind white text: 5:1 */
    --kid-teal-dark: #0a5c53;
    --kid-yellow: #ffc93c;
    --kid-mint: #d9f6f1;
    --kid-cream: #fff4c7;
    --kid-peach: #ffe1da;
    --kid-lilac: #e5e1ff;
    font-family: var(--bs-body-font-family);
    color: var(--kid-ink);
    background-color: var(--kid-paper);
    background-image:
        linear-gradient(var(--kid-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--kid-grid) 1px, transparent 1px);
    background-size: 22px 22px;
}

[data-theme^="modern"] body.area-learn h1,
[data-theme^="modern"] body.area-learn h2,
[data-theme^="modern"] body.area-learn h3 {
    font-weight: 900;
    letter-spacing: 0;
}

[data-theme^="modern"] body.area-learn .app-navbar {
    background: var(--kid-teal-strong);
    border-bottom: 4px solid var(--kid-teal-dark);
    box-shadow: none;
}

[data-theme^="modern"] body.area-learn .card {
    border: 2px solid var(--kid-ink);
    box-shadow: 4px 4px 0 var(--kid-base) !important;
    border-radius: 1.1rem;
}

/* Chunky buttons: a dark frame and a "base" under them; they rise under the pointer and press down like keys. */
[data-theme^="modern"] body.area-learn .btn {
    --bs-btn-font-weight: 800;
    --bs-btn-border-width: 2px;
    --bs-btn-border-color: var(--kid-ink);
    --bs-btn-hover-border-color: var(--kid-ink);
    --bs-btn-active-border-color: var(--kid-ink);
    border-color: var(--kid-ink);
    box-shadow: 0 4px 0 var(--kid-base);
    transition: transform .08s, box-shadow .08s, background-color .12s, color .12s;
}

[data-theme^="modern"] body.area-learn .btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--kid-base);
}

[data-theme^="modern"] body.area-learn .btn:active:not(:disabled):not(.disabled),
[data-theme^="modern"] body.area-learn .btn-check:active + .btn {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--kid-base);
}

[data-theme^="modern"] body.area-learn .btn:disabled,
[data-theme^="modern"] body.area-learn .btn.disabled {
    box-shadow: 0 2px 0 var(--kid-base);
}

[data-theme^="modern"] body.area-learn .btn-sm {
    --bs-btn-border-radius: .65rem;
    box-shadow: 0 3px 0 var(--kid-base);
}

[data-theme^="modern"] body.area-learn .btn-primary {
    --bs-btn-color: var(--kid-on-yellow);
    --bs-btn-bg: var(--kid-yellow);
    --bs-btn-hover-color: var(--kid-on-yellow);
    --bs-btn-hover-bg: #ffd35e;
    --bs-btn-active-color: var(--kid-on-yellow);
    --bs-btn-active-bg: #f5b912;
    --bs-btn-disabled-color: var(--kid-on-yellow);
    --bs-btn-disabled-bg: var(--kid-yellow);
    background-image: none;
}

[data-theme^="modern"] body.area-learn .btn-outline-primary,
[data-theme^="modern"] body.area-learn .btn-outline-secondary {
    --bs-btn-color: var(--kid-ink);
    --bs-btn-bg: var(--kid-surface);
    --bs-btn-hover-color: var(--kid-ink);
    --bs-btn-hover-bg: var(--kid-mint);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kid-teal-strong);
}

[data-theme^="modern"] body.area-learn .btn-check:checked + .btn-outline-primary,
[data-theme^="modern"] body.area-learn .btn-check:checked + .btn-outline-secondary {
    box-shadow: 0 4px 0 var(--kid-base);
}

/* Answer tiles of the quizzes: each in its own pastel colour, like sticky notes. */
[data-theme^="modern"] body.area-learn .learn-options .btn:not(.btn-success):not(.btn-danger),
[data-theme^="modern"] body.area-learn .learn-letters .btn:not(.btn-success):not(.btn-danger) {
    color: var(--kid-ink);
}

[data-theme^="modern"] body.area-learn .learn-options .btn:nth-child(4n + 1):not(.btn-success):not(.btn-danger),
[data-theme^="modern"] body.area-learn .learn-letters .btn:nth-child(4n + 1):not(.btn-success):not(.btn-danger) { background-color: var(--kid-mint); }
[data-theme^="modern"] body.area-learn .learn-options .btn:nth-child(4n + 2):not(.btn-success):not(.btn-danger),
[data-theme^="modern"] body.area-learn .learn-letters .btn:nth-child(4n + 2):not(.btn-success):not(.btn-danger) { background-color: var(--kid-cream); }
[data-theme^="modern"] body.area-learn .learn-options .btn:nth-child(4n + 3):not(.btn-success):not(.btn-danger),
[data-theme^="modern"] body.area-learn .learn-letters .btn:nth-child(4n + 3):not(.btn-success):not(.btn-danger) { background-color: var(--kid-peach); }
[data-theme^="modern"] body.area-learn .learn-options .btn:nth-child(4n + 4):not(.btn-success):not(.btn-danger),
[data-theme^="modern"] body.area-learn .learn-letters .btn:nth-child(4n + 4):not(.btn-success):not(.btn-danger) { background-color: var(--kid-lilac); }

/* The subject cards of Nauka and the game cards: notebook cards that rise under the pointer. */
[data-theme^="modern"] body.area-learn .learn-subject {
    border: 2px solid var(--kid-ink);
    box-shadow: 4px 4px 0 var(--kid-base);
    transition: transform .12s, box-shadow .12s, background-color .12s;
}

[data-theme^="modern"] body.area-learn .learn-subject:hover,
[data-theme^="modern"] body.area-learn .learn-subject:focus-visible {
    border-color: var(--kid-ink);
    background: var(--kid-cream);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--kid-teal);
}

[data-theme^="modern"] body.area-learn .learn-subject:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--kid-base);
}

[data-theme^="modern"] body.area-learn .form-control,
[data-theme^="modern"] body.area-learn .form-select {
    border: 2px solid var(--kid-ink);
}

[data-theme^="modern"] body.area-learn .progress {
    border: 2px solid var(--kid-ink);
    border-radius: 999px;
    height: 1rem;
}

[data-theme^="modern"] body.area-learn .progress-bar {
    background-image: repeating-linear-gradient(45deg, var(--kid-teal) 0 10px, #36c5b4 10px 20px);
}

/* Articles of Nauka (topics, formulas) stay easy to read: the notebook only behind them. */
[data-theme^="modern"] body.area-learn article {
    color: var(--kid-ink);
}

/* ---------------------------------------------------------------- keyboard */
/* The shadows of the buttons hide Bootstrap's focus ring: a clear outline instead, for everything reachable by Tab. */
[data-theme^="modern"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
[data-theme^="modern"] .btn-check:focus-visible + .btn {
    outline: 3px solid var(--modern-focus);
    outline-offset: 2px;
}

[data-theme^="modern"] .app-navbar :is(a, button):focus-visible {
    outline-color: #fff;
}

[data-theme^="modern"] body.area-learn :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
[data-theme^="modern"] body.area-learn .btn-check:focus-visible + .btn {
    outline-color: var(--kid-ink);
    outline-offset: 3px;
}

[data-theme^="modern"] body.area-learn .app-navbar :is(a, button):focus-visible {
    outline-color: #fff;
}

/* "Przejdź do treści" moves the focus to <main>: it needs no frame. */
[data-theme^="modern"] main:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-theme^="modern"] .btn,
    [data-theme^="modern"] .card,
    [data-theme^="modern"] .learn-subject,
    [data-theme^="modern"] .dropdown-item,
    [data-theme^="modern"] .list-group-item-action {
        transition: none;
        transform: none !important;
    }
}

/* The top bar keeps its own buttons (e.g. "Nowy test") flat also in the children's part. */
[data-theme^="modern"] body.area-learn .app-navbar .btn {
    --bs-btn-border-width: 1px;
    border-color: transparent;
    box-shadow: none;
}

/* ---------------------------------------------------------------- colours (dark): "Nowoczesny" at night */
/* Chosen in the menu ("Nowoczesny ciemny") or set by the layout's script when the device asks for dark and nothing was chosen. */
[data-theme="modern-dark"] {
    --app-bg: #0f1220;
    --app-surface: #171a2b;
    --app-surface-2: #1d2135;
    --app-border: #2a2f47;
    --app-nav-bg: linear-gradient(90deg, #3a26b8 0%, #1e40af 100%);
    --app-logo: #ffffff;
    --app-primary: #7c66ff;
    --app-primary-hover: #6a52f5;
    --app-primary-fg: #ffffff;
    --app-primary-text: #b3a7ff;
    --app-primary-rgb: 124, 102, 255;
    --app-selected-row: #262145;
    --app-correct: #4fd69c;
    --app-line: #5b6280;
    --app-overlay: rgba(10, 12, 24, .72);
    --app-row-error: rgba(229, 72, 77, .16);
    --app-row-warning: rgba(255, 193, 7, .12);
    --app-hero-1: #2a1c8f;
    --app-hero-2: #13307a;
    --app-hero-glow: #4b3bd1;
    --app-happy-bg: rgba(46, 160, 105, .16);
    --app-happy-border: rgba(79, 214, 156, .35);
    --app-scared-bg: rgba(229, 72, 77, .14);
    --app-scared-border: rgba(239, 100, 100, .35);
    --bs-body-color: #e4e6f2;
    --bs-secondary-color: rgba(228, 230, 242, .72);
    --bs-link-color-rgb: 179, 167, 255;
    --bs-link-hover-color-rgb: 205, 198, 255;
    --modern-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --modern-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .5);
    --modern-tint: #262145;
    --modern-frame: #343a57;
    --modern-field: #6c7396;
    --modern-ink: #d6d9ea;
    --modern-btn-bg: #1d2135;
    --modern-row-hover: #1e2238;
    --modern-th: #a9aec8;
    --modern-pill: #252a42;
    --modern-hover-frame: #7c66ff;
    --modern-primary-frame: #4a3fa0;
    --modern-danger-frame: #6b2e36;
    --modern-danger-tint: #3a1d24;
    --modern-danger-ink: #ff9b9b;
    --modern-danger-hover-frame: #e35d5d;
    --modern-success-frame: #22573f;
    --modern-success-tint: #17352a;
    --modern-success-ink: #7deabd;
    --modern-success-hover-frame: #2fb37c;
    --modern-focus: #b3a7ff;
}

/* Bootstrap's red and green outline text is too dark on the night surface. */
[data-theme="modern-dark"] .btn-outline-danger {
    --bs-btn-color: var(--modern-danger-ink);
}

[data-theme="modern-dark"] .btn-outline-success {
    --bs-btn-color: var(--modern-success-ink);
}

/* The children's notebook at night: dark paper, light ink, the bases stay dark. */
[data-theme="modern-dark"] body.area-learn {
    --kid-ink: #dfe6f5;
    --kid-base: #04060d;
    --kid-paper: #121626;
    --kid-grid: #1c2338;
    --kid-surface: #1b2033;
    --kid-mint: #173f3b;
    --kid-cream: #423a1a;
    --kid-peach: #47282a;
    --kid-lilac: #2c2856;
}