/* Design tokens shared by RP Hub, the character workshop and the novel editor.
   Palette steps are "R G B" triplets so Tailwind can apply opacity (see tailwind-theme.js).
   Dark mode only swaps these variables; components never special-case the theme. */

:root {
    color-scheme: light;

    /* Type: each context gets the face made for it.
       Sans for interface and dialogue, serif for names and titles, mono for code and figures. */
    --font-sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "OPPO Sans", "Alibaba PuHuiTi 3.0", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
    --font-serif: "Lora", "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

    /* Porcelain neutrals with a faint iris undertone. */
    --gray-50: 247 247 249;
    --gray-100: 240 240 244;
    --gray-200: 228 228 234;
    --gray-300: 206 206 215;
    --gray-400: 157 157 171;
    --gray-500: 115 115 132;
    --gray-600: 86 86 103;
    --gray-700: 64 64 79;
    --gray-800: 43 43 54;
    --gray-900: 27 27 35;

    /* Warm paper neutrals for the novel editor. */
    --stone-50: 250 250 249;
    --stone-100: 245 245 244;
    --stone-200: 231 229 228;
    --stone-300: 214 211 209;
    --stone-400: 168 162 158;
    --stone-500: 120 113 108;
    --stone-600: 87 83 78;
    --stone-700: 68 64 60;
    --stone-800: 41 37 36;
    --stone-900: 28 25 23;

    /* Iris accent: between blue and indigo, calm enough for long reading sessions. */
    --primary-50: 241 244 255;
    --primary-100: 227 233 255;
    --primary-200: 203 213 254;
    --primary-300: 165 181 252;
    --primary-400: 123 143 248;
    --primary-500: 90 111 240;
    --primary-600: 70 89 226;
    --primary-700: 58 73 199;
    --primary-800: 50 61 160;
    --primary-900: 45 55 126;

    --red-50: 254 242 242;
    --red-100: 254 228 228;
    --red-200: 253 205 207;
    --red-300: 249 167 171;
    --red-400: 240 110 117;
    --red-500: 229 72 77;
    --red-600: 214 51 58;
    --red-700: 185 34 42;
    --red-800: 150 30 37;
    --red-900: 120 27 32;

    --green-50: 239 250 244;
    --green-100: 220 245 231;
    --green-200: 187 234 207;
    --green-300: 134 214 170;
    --green-400: 74 186 126;
    --green-500: 47 158 97;
    --green-600: 35 133 80;
    --green-700: 29 107 66;
    --green-800: 26 86 55;
    --green-900: 22 70 46;

    --amber-50: 255 251 235;
    --amber-100: 254 243 199;
    --amber-200: 253 230 138;
    --amber-300: 252 211 77;
    --amber-400: 251 191 36;
    --amber-500: 245 158 11;
    --amber-600: 217 119 6;
    --amber-700: 180 83 9;
    --amber-800: 146 64 14;
    --amber-900: 120 53 15;

    --surface: 255 255 255;
    --surface-edge: 255 255 255;

    /* Semantic colors used by component CSS. */
    --c-canvas: rgb(var(--gray-50));
    --c-surface: rgb(var(--surface));
    --c-raised: rgb(var(--gray-100));
    --c-elevated: rgb(var(--surface));
    --c-field: rgb(var(--surface));
    --c-border: rgb(var(--gray-200));
    --c-border-soft: rgb(var(--gray-100));
    --c-border-strong: rgb(var(--gray-300));
    --c-text: rgb(var(--gray-900));
    --c-text-2: rgb(var(--gray-600));
    --c-text-3: rgb(var(--gray-500));
    --c-text-4: rgb(var(--gray-400));
    --c-accent: rgb(var(--primary-600));
    --c-accent-text: rgb(var(--primary-600));
    --c-accent-soft: rgb(var(--primary-50));
    --c-accent-edge: rgb(var(--primary-200));
    --c-danger-soft: rgb(var(--red-50));

    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.9);
    --glass-edge: rgba(255, 255, 255, 0.78);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --glass-sheen: rgba(255, 255, 255, 0.55);
    --overlay: rgba(17, 17, 28, 0.38);

    --shadow-1: 0 1px 2px rgba(22, 22, 44, 0.04), 0 2px 8px -2px rgba(22, 22, 44, 0.06);
    --shadow-2: 0 2px 4px -1px rgba(22, 22, 44, 0.05), 0 12px 28px -10px rgba(22, 22, 44, 0.16);
    --shadow-3: 0 4px 10px -2px rgba(22, 22, 44, 0.06), 0 28px 64px -18px rgba(22, 22, 44, 0.3);
    --shadow-accent: 0 8px 20px -8px rgb(var(--primary-600) / 0.55);
    --ring: 0 0 0 3px rgb(var(--primary-500) / 0.2);

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 28px;

    /* Motion: one vocabulary for every transition. Only transform/opacity are animated
       on large surfaces so the compositor can keep 60fps. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
    --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
    --dur-1: 140ms;
    --dur-2: 220ms;
    --dur-3: 360ms;
    --dur-4: 560ms;
}

:root[data-app-theme="dark"] {
    color-scheme: dark;

    /* Clarity comes from separation, not brightness: a deeper canvas, fields and borders
       that stand clear of the cards, and crisper secondary text. */
    --gray-50: 22 22 26;
    --gray-100: 45 45 52;
    --gray-200: 61 61 71;
    --gray-300: 84 84 97;
    --gray-400: 144 144 158;
    --gray-500: 172 172 185;
    --gray-600: 200 200 210;
    --gray-700: 219 219 227;
    --gray-800: 233 233 239;
    --gray-900: 246 246 249;
    --gray-fill-700: 66 66 77;
    --gray-fill-800: 54 54 63;
    --gray-fill-900: 14 14 18;

    --stone-50: 28 26 24;
    --stone-100: 40 37 35;
    --stone-200: 54 50 47;
    --stone-300: 74 69 65;
    --stone-400: 140 132 125;
    --stone-500: 166 158 151;
    --stone-600: 192 185 178;
    --stone-700: 208 201 194;
    --stone-800: 228 222 216;
    --stone-900: 240 235 230;
    --stone-fill-700: 88 82 76;
    --stone-fill-800: 70 65 60;
    --stone-fill-900: 14 13 12;

    --primary-50: 33 38 70;
    --primary-100: 40 47 86;
    --primary-200: 52 63 116;
    --primary-300: 68 82 156;
    --primary-400: 84 102 201;
    --primary-500: 106 124 240;
    --primary-600: 95 113 234;
    --primary-700: 132 149 247;
    --primary-800: 167 180 251;
    --primary-900: 201 209 253;
    --primary-text-400: 125 143 245;
    --primary-text-500: 139 155 248;
    --primary-text-600: 147 162 250;
    --primary-text-700: 165 178 251;
    --primary-text-800: 188 198 252;
    --primary-text-900: 211 218 255;

    --red-50: 54 28 32;
    --red-100: 66 32 37;
    --red-200: 88 40 46;
    --red-300: 118 50 57;
    --red-400: 170 58 66;
    --red-500: 229 72 77;
    --red-600: 220 62 68;
    --red-700: 236 93 98;
    --red-800: 245 140 143;
    --red-900: 252 190 192;
    --red-text-400: 255 128 133;
    --red-text-500: 255 138 143;
    --red-text-600: 255 145 150;
    --red-text-700: 255 160 164;
    --red-text-800: 255 185 188;
    --red-text-900: 255 210 212;

    --green-50: 24 44 34;
    --green-100: 28 54 40;
    --green-200: 36 72 52;
    --green-300: 46 98 70;
    --green-400: 52 140 92;
    --green-500: 70 185 122;
    --green-600: 58 165 107;
    --green-700: 108 207 152;
    --green-800: 155 227 187;
    --green-900: 195 240 214;
    --green-text-400: 108 207 152;
    --green-text-500: 118 214 160;
    --green-text-600: 125 218 165;
    --green-text-700: 140 224 176;
    --green-text-800: 165 232 194;
    --green-text-900: 195 240 214;

    --amber-50: 52 42 22;
    --amber-100: 64 51 24;
    --amber-200: 84 66 28;
    --amber-300: 114 88 34;
    --amber-400: 180 130 30;
    --amber-500: 230 165 40;
    --amber-600: 214 145 30;
    --amber-700: 240 190 90;
    --amber-800: 247 210 130;
    --amber-900: 252 228 175;
    --amber-text-400: 240 196 110;
    --amber-text-500: 242 200 115;
    --amber-text-600: 244 205 125;
    --amber-text-700: 246 212 140;
    --amber-text-800: 248 222 165;
    --amber-text-900: 252 232 190;

    --surface: 35 35 41;
    --surface-edge: 80 80 94;
    --c-field: rgb(var(--gray-100));
    --c-elevated: rgb(62 62 73);

    --glass-bg: rgba(36, 36, 43, 0.76);
    --glass-bg-strong: rgba(36, 36, 43, 0.93);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --glass-sheen: rgba(255, 255, 255, 0.035);
    --overlay: rgba(6, 6, 10, 0.5);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 4px -1px rgba(0, 0, 0, 0.3), 0 14px 32px -10px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 4px 10px -2px rgba(0, 0, 0, 0.35), 0 30px 70px -18px rgba(0, 0, 0, 0.7);
    --shadow-accent: 0 8px 22px -8px rgb(var(--primary-600) / 0.6);
    --ring: 0 0 0 3px rgb(var(--primary-500) / 0.3);
}

/* DaisyUI tokens (character workshop) follow the same palette in both themes. */
:root[data-theme] {
    --p: 53.32% 0.2073 271.38;
    --pc: 100% 0 0;
    --s: 59.72% 0.1391 1.24;
    --sc: 100% 0 0;
    --a: 63.41% 0.1002 182.09;
    --ac: 100% 0 0;
    --n: 29.38% 0.0199 285.11;
    --nc: 94.75% 0.0067 286.27;
    --b1: 100% 0 0;
    --b2: 95.6% 0.0053 286.3;
    --b3: 91.76% 0.0081 286.24;
    --bc: 22.58% 0.0154 285.1;
    --in: 59.44% 0.1668 259.72;
    --inc: 100% 0 0;
    --su: 59.53% 0.1214 157.11;
    --suc: 100% 0 0;
    --wa: 70.39% 0.1467 74.94;
    --wac: 100% 0 0;
    --er: 62.56% 0.1933 23.03;
    --erc: 100% 0 0;
    --rounded-box: 1.25rem;
    --rounded-btn: 0.875rem;
    --rounded-badge: 1rem;
    --animation-btn: 0.22s;
    --animation-input: 0.22s;
    --btn-focus-scale: 0.97;
    --border-btn: 1px;
    --tab-radius: 0.75rem;
}
:root[data-app-theme="dark"][data-theme] {
    --p: 62.95% 0.1734 273.73;
    --pc: 99% 0 0;
    --s: 74.19% 0.1203 0.14;
    --sc: 20% 0.03 0;
    --a: 76.84% 0.1016 181.58;
    --ac: 20% 0.02 180;
    --n: 38% 0.016 285.5;
    --nc: 94.75% 0.0067 286.27;
    --b1: 26.2% 0.0112 285.58;
    --b2: 30.6% 0.0127 285.58;
    --b3: 35.6% 0.0141 285.59;
    --bc: 95.2% 0.0060 286.24;
    --in: 72.84% 0.1242 260.94;
    --inc: 20% 0.03 260;
    --su: 70.43% 0.1396 155.91;
    --suc: 20% 0.03 155;
    --wa: 81.46% 0.1376 80.68;
    --wac: 22% 0.03 80;
    --er: 76.26% 0.1418 18.29;
    --erc: 22% 0.03 18;
}

/* Shared keyframes; every page links this file. */
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes pop-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); } }

::selection { background: rgb(var(--primary-500) / 0.24); }

/* Toasts on every page: a solid pill that slides in without bounce or blur.
   The icon names the action (RPHubUtils.getToastIcon); its tint says how it went. */
.toast-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.toast-item {
    /* One line tall (icon plus padding and border), so a leaving toast knows how much space to fold away. */
    --toast-height: calc(2.625rem + 2px);
    display: flex;
    box-sizing: border-box;
    height: var(--toast-height);
    align-items: center;
    gap: 0.625rem;
    min-width: min(17.5rem, calc(100vw - 2rem));
    max-width: min(32rem, calc(100vw - 2rem));
    padding: 0.375rem 1.125rem 0.375rem 0.375rem;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-elevated);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.4;
    box-shadow: var(--shadow-2);
    pointer-events: auto;
}
.toast-icon { display: grid; flex: none; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 999px; }
/* The message stays on one line beside the icon. */
.toast-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast-item--success .toast-icon { background: rgb(var(--green-500) / 0.14); color: rgb(var(--green-text-600, var(--green-600))); }
.toast-item--error .toast-icon { background: rgb(var(--red-500) / 0.14); color: rgb(var(--red-text-600, var(--red-600))); }
.toast-item--info .toast-icon { background: rgb(var(--primary-500) / 0.14); color: rgb(var(--primary-text-600, var(--primary-600))); }
.toast-item--warning .toast-icon { background: rgb(var(--amber-500) / 0.16); color: rgb(var(--amber-text-700, var(--amber-700))); }
/* A leaving toast fades and shrinks in place while its space folds shut, so the ones below glide up
   over it instead of the stack jumping. */
.toast-enter-active { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.toast-leave-active { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-in-out), margin-bottom var(--dur-3) var(--ease-in-out); }
.toast-move { transition: transform var(--dur-3) var(--ease-out); }
.toast-enter-from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.96); }
.toast-leave-to { opacity: 0; transform: translate3d(0, -4px, 0) scale(0.94); margin-bottom: calc(-1 * (var(--toast-height) + 0.5rem)); }

/* Theme toggle in the navigation footer. */
.appearance-switch {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}
.appearance-switch svg { width: 21px; height: 21px; stroke-width: 1.7; }
.appearance-switch:hover { background: rgb(var(--gray-500) / 0.12); }
.appearance-switch:active { transform: rotate(-24deg) scale(0.9); }
.appearance-switch:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Card authors style their own HTML; soften it once in dark mode, never touching images. */
:root[data-app-theme="dark"] :is(.msg-bubble-glass .markdown-body > :is(div, section, article, aside, header, footer, table, iframe), .ui-template-render, .ui-template-preview) {
    filter: brightness(0.9);
}

/* Novel editor paper tones written as arbitrary values. */
:root[data-app-theme="dark"] :is([class~="bg-[#f5f5f0]"], [class~="bg-[#e8e8e3]"]) { background-color: rgb(var(--stone-50)) !important; }
:root[data-app-theme="dark"] :is([class~="bg-[#e4e4df]"], [class~="bg-[#e0e0db]"]) { background-color: rgb(var(--stone-100)) !important; }
:root[data-app-theme="dark"] [class~="border-[#d4d4ce]"] { border-color: rgb(var(--stone-200)) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}