@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --scrim-drawer: rgba(0, 0, 0, 0.32);
  --scrim-heavy: rgba(0, 0, 0, 0.40);
  --scrim-sheet: rgba(0, 0, 0, 0.35);
  --mood-warm: oklch(0.72 0.10 60);
  --mood-cool: oklch(0.65 0.06 240);
  --shadow-soft: 0 8px 30px oklch(0 0 0 / 0.18);
  --shadow-menu: 0 8px 30px oklch(0 0 0 / 0.22);
  --dark-button-text: oklch(0.18 0.013 55);
}

.phone.light {
  --bg: #FBF8F3;
  --bg-elev: #F5F0E4;
  --bg-sunken: #EEEADF;
  --bubble-user: #C4784A;
  --bubble-ai: #F1E9D4;
  --on-bubble-user: #FFFFFF;
  --bubble-user-time: rgba(255, 255, 255, 0.82);
  --text: #3A3530;
  --text-2: #776B5D;
  --text-3: #AB9F8E;
  --text-4: #C8BEAE;
  --border: #DFD8C9;
  --border-soft: #EEEADF;
  --accent: #A77852;
  --accent-soft: oklch(0.91 0.040 60);
  --online: oklch(0.70 0.110 145);
  --warn: oklch(0.70 0.130 50);
  --danger: #B95C4C;
  --bezel: oklch(0.18 0.008 60);
  --menu-bg: #F5F0E4;
  --menu-text: #3A3530;
  --mcp-bg: #EFE9DA;
  --mcp-text: #8C8073;
  --thought-line: #DFD8C9;
  --thought-step-border: #C8BEAE;
  --done: #A77852;
  --chat-icon-bg: #F0EAD9;
}

.phone.dark {
  --bg: #2A2421;
  --bg-elev: #332D29;
  --bg-sunken: #231F1D;
  --bubble-user: #C4784A;
  --bubble-ai: #3A332E;
  --on-bubble-user: #FFFFFF;
  --bubble-user-time: rgba(255, 255, 255, 0.82);
  --text: #E8DDD1;
  --text-2: #C8BBAE;
  --text-3: #928579;
  --text-4: #6F645B;
  --border: #4A4038;
  --border-soft: #3D342F;
  --accent: #D09A6A;
  --accent-soft: oklch(0.36 0.040 55);
  --online: oklch(0.78 0.110 145);
  --warn: oklch(0.78 0.130 55);
  --danger: #E48A78;
  --bezel: oklch(0.08 0.004 60);
  --menu-bg: #332D29;
  --menu-text: #E8DDD1;
  --mcp-bg: #2E2925;
  --mcp-text: #BBAA9A;
  --thought-line: #4A4038;
  --thought-step-border: #5B4F46;
  --done: #D09A6A;
  --chat-icon-bg: #332D29;
}

.phone.frost {
  --bg: #FAFCFF;
  --bg-elev: #F5F8FC;
  --bg-sunken: #F0F4FA;
  --bubble-user: #7E8FA8;
  --bubble-ai: #F0F4FA;
  --text: #2E3340;
  --text-2: #686E7A;
  --text-3: #9AA2B0;
  --text-4: #C8CED8;
  --border: #D0D8E5;
  --border-soft: #E0E6F0;
  --accent: #6F87A8;
  --accent-soft: #D7DFEB;
  --online: #6EB287;
  --warn: oklch(0.65 0.130 50);
  --danger: oklch(0.58 0.140 25);
  --bezel: oklch(0.18 0.008 60);
  --on-bubble-user: #FFFFFF;
  --bubble-user-time: rgba(255, 255, 255, 0.82);
  --menu-bg: #F5F8FC;
  --menu-text: #2E3340;
  --mcp-bg: #E7EDF6;
  --mcp-text: #6D7481;
  --thought-line: #D0D8E5;
  --thought-step-border: #B8C4D4;
  --done: #6F87A8;
  --chat-icon-bg: #F0F4FA;
}

.phone.pearl {
  --bg: #FDFCFE;
  --bg-elev: #F9F7FB;
  --bg-sunken: #F5F3F7;
  --bubble-user: #9A8FA8;
  --bubble-ai: #F5F3F7;
  --text: #3A343F;
  --text-2: #78737E;
  --text-3: #9B95A4;
  --text-4: #C8C2CE;
  --border: #DFDBE5;
  --border-soft: #ECEAF0;
  --accent: #9A8FA8;
  --accent-soft: #E5DFEB;
  --online: #6EB287;
  --warn: oklch(0.65 0.130 50);
  --danger: oklch(0.58 0.140 25);
  --bezel: oklch(0.18 0.008 60);
  --on-bubble-user: #FFFFFF;
  --bubble-user-time: rgba(255, 255, 255, 0.82);
  --menu-bg: #F9F7FB;
  --menu-text: #3A343F;
  --mcp-bg: #EFEAF3;
  --mcp-text: #7C7485;
  --thought-line: #DFDBE5;
  --thought-step-border: #C8C2CE;
  --done: #9A8FA8;
  --chat-icon-bg: #F5F3F7;
}

.phone.academy {
  --bg: #1A1C16;
  --bg-elev: #2A2820;
  --bg-sunken: #232118;
  --bubble-user: #B89456;
  --bubble-ai: #2A2820;
  --text: #E0D8C8;
  --text-2: #B5AD9A;
  --text-3: #8A8270;
  --text-4: #5E5848;
  --border: #4A4538;
  --border-soft: #3A3528;
  --accent: #C9A961;
  --accent-soft: #3A4A38;
  --online: #7A9A6E;
  --warn: oklch(0.78 0.130 55);
  --danger: oklch(0.70 0.140 25);
  --bezel: oklch(0.08 0.004 60);
  --on-bubble-user: #1A1613;
  --bubble-user-time: rgba(26, 22, 19, 0.72);
  --menu-bg: #2A2820;
  --menu-text: #E0D8C8;
  --mcp-bg: #343126;
  --mcp-text: #B5AD9A;
  --thought-line: #4A4538;
  --thought-step-border: #6C624B;
  --done: #C9A961;
  --chat-icon-bg: #2A2820;
}

.phone.gothic {
  --bg: #17161C;
  --bg-elev: #23222A;
  --bg-sunken: #1C1B22;
  --bubble-user: #8B3040;
  --bubble-ai: #23222A;
  --text: #E0DEE5;
  --text-2: #B0ADB8;
  --text-3: #7A7882;
  --text-4: #4A4852;
  --border: #3A3842;
  --border-soft: #2C2A33;
  --accent: #8B3040;
  --accent-soft: #3A2530;
  --online: #B0ADB8;
  --warn: oklch(0.78 0.130 55);
  --danger: #8B3040;
  --bezel: oklch(0.08 0.004 60);
  --on-bubble-user: #FFFFFF;
  --bubble-user-time: rgba(255, 255, 255, 0.8);
  --menu-bg: #23222A;
  --menu-text: #E0DEE5;
  --mcp-bg: #2C2A33;
  --mcp-text: #B0ADB8;
  --thought-line: #3A3842;
  --thought-step-border: #4A4852;
  --done: #B65769;
  --chat-icon-bg: #23222A;
}

.phone.dark .primary,
.phone.academy .primary,
.phone.gothic .primary,
.phone.dark .save-btn,
.phone.academy .save-btn,
.phone.gothic .save-btn,
.phone.dark .chip-dom.active,
.phone.academy .chip-dom.active,
.phone.gothic .chip-dom.active {
  background: var(--accent);
  color: var(--dark-button-text);
}