/* Approved cartoon direction. Presentation only; no routing or API changes.
   Own the complete shared palette: partial overrides let the former brick-red
   hover colors and olive/cream surfaces leak back into lazy-loaded pages. */
body.cartoon-theme {
    --cartoon-paper: #f8fbff;
    --cartoon-sheet: #ffffff;
    --cartoon-ink: #283747;
    --cartoon-muted: #546578;
    --cartoon-line: #d8e5ed;
    --cartoon-coral: #ff9b88;
    --cartoon-coral-hover: #ffb19d;
    --cartoon-blue: #e3f3ff;
    --cartoon-blue-ink: #276a91;
    --cartoon-blue-hover: #1c567a;
    --cartoon-mint: #e0f7ec;
    --cartoon-green: #286850;
    --cartoon-peach: #fff1d6;
    --cartoon-orange: #88601b;
    --cartoon-outline: #34465a;
    --cartoon-shadow: #34465a;
    --cartoon-danger: #b93650;
    --cartoon-code-bg: #223348;
    --cartoon-code-ink: #ecf6ff;
    background: var(--cartoon-paper);
    color: var(--cartoon-ink);
}
[data-theme="dark"] body.cartoon-theme {
    --cartoon-paper: #1c293a;
    --cartoon-sheet: #243447;
    --cartoon-ink: #edf6ff;
    --cartoon-muted: #bdcede;
    --cartoon-line: #445c73;
    --cartoon-blue: #2d4b65;
    --cartoon-blue-ink: #a4d9ff;
    --cartoon-blue-hover: #c1e7ff;
    --cartoon-mint: #294b46;
    --cartoon-green: #a0e4c2;
    --cartoon-peach: #484430;
    --cartoon-orange: #f3d590;
    --cartoon-outline: #a1bcd3;
    --cartoon-shadow: #101c2b;
    --cartoon-danger: #ffadbd;
    --cartoon-code-bg: #142133;
}
body.cartoon-theme.friends-app {
    --paper: var(--cartoon-paper);
    --sheet: var(--cartoon-sheet);
    --ink: var(--cartoon-ink);
    --muted: var(--cartoon-muted);
    --line: var(--cartoon-line);
    --sage: var(--cartoon-mint);
    --sage-ink: var(--cartoon-green);
    --accent: var(--cartoon-blue-ink);
    --accent-hover: var(--cartoon-blue-hover);
    --accent-soft: var(--cartoon-blue);
    --soft: var(--cartoon-blue);
    --danger: var(--cartoon-danger);
    --code-bg: var(--cartoon-code-bg);
    --code-ink: var(--cartoon-code-ink);
}
body.cartoon-theme.admin-console {
    --admin-paper: var(--cartoon-paper);
    --admin-sheet: var(--cartoon-sheet);
    --admin-ink: var(--cartoon-ink);
    --admin-sage: var(--cartoon-mint);
    --admin-sage-ink: var(--cartoon-green);
    --bg-primary: var(--cartoon-sheet);
    --bg-secondary: var(--cartoon-paper);
    --bg-tertiary: #edf4fa;
    --bg-glass: var(--cartoon-sheet);
    --bg-glass-strong: var(--cartoon-sheet);
    --text-primary: var(--cartoon-ink);
    --text-secondary: var(--cartoon-muted);
    --text-tertiary: var(--cartoon-muted);
    --border-color: var(--cartoon-line);
    --border-hover: #94b5cd;
    --primary-color: var(--cartoon-blue-ink);
    --primary-hover: var(--cartoon-blue-hover);
    --primary-light: #5797bd;
    --primary-10: var(--cartoon-blue);
    --primary-20: #c9e7fa;
    --primary-30: #a5d5f2;
    --primary-40: #7cbedf;
    --primary-rgb: 39, 106, 145;
    --secondary-color: var(--cartoon-green);
    --success-color: #287657;
    --success-10: var(--cartoon-mint);
    --success-bg: var(--cartoon-mint);
    --success-bg-light: #eefbf5;
    --success-bg-alt: #f3fcf8;
    --success-text: var(--cartoon-green);
    --success-text-light: #a0e4c2;
    --warning-color: #916217;
    --warning-bg: var(--cartoon-peach);
    --warning-bg-light: #ffebbb;
    --warning-bg-alt: #fff9ec;
    --warning-border: #d9b462;
    --warning-text: var(--cartoon-orange);
    --warning-15: #fff6e4;
    --danger-color: var(--cartoon-danger);
    --danger-bg: #ffe7ed;
    --danger-bg-light: #fff0f4;
    --danger-bg-alt: #fff7f9;
    --danger-border: #e7a3b4;
    --danger-text: var(--cartoon-danger);
    --info-color: var(--cartoon-blue-ink);
    --info-bg: var(--cartoon-blue);
    --info-bg-light: #eef8ff;
    --info-bg-lighter: #f4faff;
    --info-text: var(--cartoon-blue-ink);
    --neutral-100: #f3f8fc;
    --neutral-200: #eaf2f8;
    --neutral-300: #d5e3ed;
    --neutral-400: #91aabc;
    --neutral-500: #627c91;
    --neutral-600: #486378;
    --neutral-700: #344d62;
    --neutral-alt: #f0f6fb;
    --code-bg: var(--cartoon-code-bg);
    --code-text: var(--cartoon-code-ink);
    --btn-success: var(--success-color);
    --btn-primary-hover: var(--primary-hover);
    --theme-toggle-bg: var(--bg-secondary);
    --theme-toggle-icon: var(--text-secondary);
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
}
[data-theme="dark"] body.cartoon-theme.admin-console {
    --bg-tertiary: #2d4055;
    --border-hover: #7596b3;
    --primary-light: #8ccbeb;
    --primary-20: #365d7c;
    --primary-30: #497799;
    --primary-40: #659bbf;
    --primary-rgb: 164, 217, 255;
    --success-color: var(--cartoon-green);
    --success-bg-light: #263f3e;
    --success-bg-alt: #243b3b;
    --warning-color: var(--cartoon-orange);
    --warning-bg-light: #544d30;
    --warning-bg-alt: #3b3b30;
    --warning-border: #86794e;
    --warning-15: #40402f;
    --danger-bg: #513444;
    --danger-bg-light: #463241;
    --danger-bg-alt: #3d303d;
    --danger-border: #936075;
    --info-bg-light: #2a4057;
    --info-bg-lighter: #273b51;
    --neutral-100: #283b50;
    --neutral-200: #2d4258;
    --neutral-300: #405c74;
    --neutral-400: #7897b2;
    --neutral-500: #a4bccf;
    --neutral-600: #c2d6e7;
    --neutral-700: #dcebf7;
    --neutral-alt: #2b3e53;
}
body.cartoon-theme :is(button,a,input,select,textarea,summary):focus-visible {
    outline: 3px solid var(--cartoon-blue-ink);
    outline-offset: 3px;
}
body.cartoon-theme .btn {
    border-radius: 10px;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
    font-weight: 650;
}
body.cartoon-theme :is(.btn.primary,.btn.btn-primary) {
    background: var(--cartoon-coral);
    border: 2px solid var(--cartoon-outline);
    color: #283747;
    box-shadow: 3px 3px 0 var(--cartoon-shadow);
}
body.cartoon-theme :is(.btn.primary,.btn.btn-primary):hover:not(:disabled) {
    background: var(--cartoon-coral-hover);
    border-color: var(--cartoon-outline);
    color: #283747;
    transform: translate(-1px,-1px);
    box-shadow: 4px 4px 0 var(--cartoon-shadow);
}
body.cartoon-theme :is(.btn.primary,.btn.btn-primary):active:not(:disabled) {
    transform: translate(2px,2px);
    box-shadow: none;
}
[data-theme="dark"] body.cartoon-theme :is(.btn.primary,.btn.btn-primary) { color: #283747; }
body.cartoon-theme :is(.input,.form-control,.field>input) { border-radius: 9px; }
body.cartoon-theme.admin-console .header { background: var(--cartoon-sheet); }
body.cartoon-theme.admin-console .header h1 .admin-brand-mark,
body.cartoon-theme.friends-app .brand-mark {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 42px;
    flex: 0 0 40px;
    border: 2px solid var(--cartoon-outline);
    border-radius: 13px;
    color: #283747;
    background: var(--cartoon-coral);
    box-shadow: 2px 2px 0 var(--cartoon-shadow);
    transform: rotate(-6deg);
    font-size: 24px;
}
body.cartoon-theme.admin-console .header h1 { position: relative; width: 170px; }
body.cartoon-theme.admin-console .header .admin-brand-caption { position: absolute; left: 49px; bottom: -5px; width: auto; padding: 0; font-size: 9px; }
body.cartoon-theme.admin-console .sidebar { background: var(--cartoon-sheet); padding-inline: 13px; }
body.cartoon-theme.admin-console .sidebar .nav-item { border: 1.5px solid transparent; border-radius: 10px; min-height: 42px; }
body.cartoon-theme.admin-console .sidebar .nav-item.active {
    background: var(--cartoon-blue) !important;
    border-color: var(--cartoon-outline);
    color: var(--cartoon-blue-ink) !important;
    box-shadow: 2px 2px 0 var(--cartoon-shadow);
}
body.cartoon-theme.admin-console .header-system-popover,
body.cartoon-theme.admin-console :is(.modal-content,.provider-modal-content,.usage-account-features-modal,.cdk-invitation-modal) {
    border: 2px solid var(--cartoon-outline);
    border-radius: 16px;
    box-shadow: 5px 5px 0 var(--cartoon-shadow);
}
body.cartoon-theme.admin-console .cartoon-sidebar-note {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--cartoon-muted);
    text-decoration: none;
    font-size: 11px;
    line-height: 1.8;
}
.cartoon-sidebar-note img { width: 74px; height: 74px; object-fit: contain; }
.cartoon-sidebar-note strong { color: var(--cartoon-ink); font-weight: 650; }
@media(max-width:768px) {
    body.cartoon-theme.admin-console .header h1 .admin-brand-mark { width: 30px; height: 32px; flex-basis: 30px; font-size: 18px; border-radius: 10px; }
    body.cartoon-theme.admin-console .header h1 { width: auto; }
    body.cartoon-theme.admin-console .header .admin-brand-caption { display: none; }
    body.cartoon-theme.admin-console .sidebar { padding-inline: 14px; }
    body.cartoon-theme.admin-console .sidebar .nav-item { min-height: 46px; }
}
@media(prefers-reduced-motion:reduce) {
    body.cartoon-theme *, body.cartoon-theme *::before, body.cartoon-theme *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}