:root {
    /*surfaces*/
    --bg: rgb(238 239 234);
    --surface: rgb(248 249 245);
    --fill: rgb(224 226 219);

    /*text*/
    --text: rgb(25 30 28);
    --text-muted: rgb(80 88 84);
    --text-subtle: rgb(122 130 126);

    /*links*/
    --border: rgb(216 219 213);
    --ring: rgb(0 122 96);
    --link: rgb(0 105 82);
    --link-hover: rgb(0 74 58);

    /*danger*/
    --danger: rgb(228 86 73);
    --danger-fg: rgb(255 255 255);
    --danger-soft: rgb(253 237 235);
    --danger-soft-fg: rgb(163 45 35);
    --danger-soft-hover: rgb(247 220 217);
    --danger-soft-active: rgb(241 203 198);
    --danger-border: rgb(243 179 172);

    /*success*/
    --success: rgb(80 161 79);
    --success-fg: rgb(255 255 255);
    --success-soft: rgb(239 247 238);
    --success-soft-fg: rgb(52 115 51);
    --success-border: rgb(175 214 174);

    /*warning*/
    --warning: rgb(193 132 1);
    --warning-fg: rgb(255 255 255);
    --warning-soft: rgb(251 244 227);
    --warning-soft-fg: rgb(140 95 1);
    --warning-border: rgb(232 204 135);

    /*favorite star: gold like most apps' favorites, kept apart from warning so it never reads as one*/
    --star: rgb(234 172 0);

    /*AI: violet to fuchsia, apart from every accent choice, so prompting a model never looks like the rest of the app*/
    --ai: rgb(109 40 217);
    --ai-2: rgb(192 38 211);
    --ai-fg: rgb(255 255 255);
    --ai-soft: rgb(246 241 255);
    --ai-soft-fg: rgb(91 33 182);
    --ai-border: rgb(210 192 250);

    /*SQL and code highlighting: kept off the semantic colors*/
    --syntax-keyword: rgb(37 76 168);
    --syntax-function: rgb(126 58 156);
    --syntax-string: rgb(14 116 104);
    --syntax-number: rgb(168 84 24);
    --syntax-comment: rgb(122 130 126);

    /*elevation*/
    --shadow-sm: 0 1px 2px rgb(25 30 28 / 0.05);
    --shadow-md: 0 6px 18px rgb(25 30 28 / 0.08);

    /* accent previews */
    --accent-choice-pink: rgb(219 39 119);
    --accent-choice-purple: rgb(147 51 234);
    --accent-choice-evergreen: rgb(0 115 96);
    --accent-choice-sky: rgb(14 165 233);
}
[data-theme="dark"] {
    /* Low-glare industrial console. */
    --bg: rgb(17 21 20);
    --surface: rgb(23 28 26);
    --fill: rgb(40 47 44);

    /* Text — brighter for better readability */
    --text: rgb(219 226 221);
    --text-muted: rgb(154 165 159);
    --text-subtle: rgb(101 113 107);

    /* Borders / focus */
    --border: rgb(48 57 53);
    --ring: rgb(89 208 171);

    /* Links — One Dark Pro Vivid blue */
    --link: rgb(111 214 181);
    --link-hover: rgb(156 232 208);

    /* Danger — vivid coral red */
    --danger: rgb(239 105 115);
    --danger-fg: rgb(30 33 39);
    --danger-soft: rgb(70 32 37);
    --danger-soft-fg: rgb(250 185 190);
    --danger-soft-hover: rgb(92 42 49);
    --danger-soft-active: rgb(114 52 60);
    --danger-border: rgb(150 65 72);

    /* Success — vivid green */
    --success: rgb(140 220 130);
    --success-fg: rgb(18 28 18);
    --success-soft: rgb(32 64 40);
    --success-soft-fg: rgb(180 235 175);
    --success-border: rgb(78 132 82);

    /* Warning — vivid amber */
    --warning: rgb(240 200 120);
    --warning-fg: rgb(30 33 39);
    --warning-soft: rgb(68 52 22);
    --warning-soft-fg: rgb(250 220 165);
    --warning-border: rgb(165 125 55);

    --star: rgb(250 204 21);

    --ai: rgb(167 139 250);
    --ai-2: rgb(232 121 249);
    --ai-fg: rgb(22 16 36);
    --ai-soft: rgb(36 29 54);
    --ai-soft-fg: rgb(216 202 255);
    --ai-border: rgb(86 68 138);

    --syntax-keyword: rgb(130 170 255);
    --syntax-function: rgb(206 166 242);
    --syntax-string: rgb(120 212 180);
    --syntax-number: rgb(240 172 112);
    --syntax-comment: rgb(122 134 128);

    /* Shadows — slightly deeper for the darker bg */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.18);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.28);

}

/* Accent palettes — light mode defaults to sky, matching the marketing and documentation sites. */
:root,
[data-accent="sky"] {
    --accent: rgb(3 105 161);
    --accent-fg: rgb(240 249 255);
    --accent-soft: rgb(224 242 254);
    --accent-soft-fg: rgb(12 74 110);
    --accent-border: rgb(56 189 248);
    --accent-hover: rgb(7 89 133);
}

[data-accent="pink"] {
    --accent: rgb(190 24 93);
    --accent-fg: rgb(255 247 250);
    --accent-soft: rgb(252 231 243);
    --accent-soft-fg: rgb(131 24 67);
    --accent-border: rgb(244 114 182);
    --accent-hover: rgb(157 23 77);
}

[data-accent="purple"] {
    --accent: rgb(126 34 206);
    --accent-fg: rgb(250 245 255);
    --accent-soft: rgb(243 232 255);
    --accent-soft-fg: rgb(88 28 135);
    --accent-border: rgb(192 132 252);
    --accent-hover: rgb(107 33 168);
}

[data-accent="evergreen"] {
    --accent: rgb(0 115 96);
    --accent-fg: rgb(240 253 250);
    --accent-soft: rgb(223 244 237);
    --accent-soft-fg: rgb(0 72 60);
    --accent-border: rgb(98 182 161);
    --accent-hover: rgb(0 89 76);
}

/* Identity colors, intentionally separate from status colors. */
:root {
    --avatar-peach: rgb(255 232 220);
    --avatar-peach-fg: rgb(154 67 32);
    --avatar-teal: rgb(216 244 238);
    --avatar-teal-fg: rgb(0 92 78);
    --avatar-purple: rgb(237 229 250);
    --avatar-purple-fg: rgb(91 54 138);

    /* a person's presence color: their caret, ring and live avatar (see shared.PresenceColor), white text on it */
    --presence-1: rgb(37 99 235);
    --presence-2: rgb(219 39 119);
    --presence-3: rgb(5 150 105);
    --presence-4: rgb(217 119 6);
    --presence-5: rgb(124 58 237);
    --presence-6: rgb(8 145 178);
    --presence-7: rgb(220 38 38);
    --presence-8: rgb(101 163 13);
}

/* Accent palettes — dark mode defaults to sky. */
[data-theme="dark"],
[data-theme="dark"][data-accent="sky"] {
    --accent: rgb(125 211 252);
    --accent-fg: rgb(8 47 73);
    --accent-soft: rgb(12 74 110);
    --accent-soft-fg: rgb(186 230 253);
    --accent-border: rgb(2 132 199);
    --accent-hover: rgb(186 230 253);
}

[data-theme="dark"][data-accent="pink"] {
    --accent: rgb(244 114 182);
    --accent-fg: rgb(43 10 25);
    --accent-soft: rgb(80 7 36);
    --accent-soft-fg: rgb(251 207 232);
    --accent-border: rgb(190 24 93);
    --accent-hover: rgb(249 168 212);
}

[data-theme="dark"][data-accent="purple"] {
    --accent: rgb(192 132 252);
    --accent-fg: rgb(46 16 101);
    --accent-soft: rgb(59 7 100);
    --accent-soft-fg: rgb(233 213 255);
    --accent-border: rgb(126 34 206);
    --accent-hover: rgb(216 180 254);
}

[data-theme="dark"][data-accent="evergreen"] {
    --accent: rgb(95 208 178);
    --accent-fg: rgb(5 46 39);
    --accent-soft: rgb(7 63 53);
    --accent-soft-fg: rgb(180 234 220);
    --accent-border: rgb(22 128 109);
    --accent-hover: rgb(134 223 200);
}

[data-theme="dark"] {
    --avatar-peach: rgb(91 49 34);
    --avatar-peach-fg: rgb(255 205 178);
    --avatar-teal: rgb(10 70 63);
    --avatar-teal-fg: rgb(164 235 218);
    --avatar-purple: rgb(67 46 91);
    --avatar-purple-fg: rgb(218 194 250);
}
/* ============================================================
   FONTS
   ============================================================ */

/* google-sans-flex - latin */
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 100;
    src: url("./fonts/google-sans-flex-v16-latin-100.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 200;
    src: url("./fonts/google-sans-flex-v16-latin-200.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 300;
    src: url("./fonts/google-sans-flex-v16-latin-300.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/google-sans-flex-v16-latin-regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 500;
    src: url("./fonts/google-sans-flex-v16-latin-500.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 600;
    src: url("./fonts/google-sans-flex-v16-latin-600.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 700;
    src: url("./fonts/google-sans-flex-v16-latin-700.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 800;
    src: url("./fonts/google-sans-flex-v16-latin-800.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Google Sans Flex";
    font-style: normal;
    font-weight: 900;
    src: url("./fonts/google-sans-flex-v16-latin-900.woff2") format("woff2");
}

/* jetbrains-mono - latin */
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100;
    src: url("./fonts/jetbrains-mono-v24-latin-100.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 100;
    src: url("./fonts/jetbrains-mono-v24-latin-100italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 200;
    src: url("./fonts/jetbrains-mono-v24-latin-200.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 200;
    src: url("./fonts/jetbrains-mono-v24-latin-200italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 300;
    src: url("./fonts/jetbrains-mono-v24-latin-300.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 300;
    src: url("./fonts/jetbrains-mono-v24-latin-300italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/jetbrains-mono-v24-latin-regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 400;
    src: url("./fonts/jetbrains-mono-v24-latin-italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    src: url("./fonts/jetbrains-mono-v24-latin-500.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 500;
    src: url("./fonts/jetbrains-mono-v24-latin-500italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 600;
    src: url("./fonts/jetbrains-mono-v24-latin-600.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 600;
    src: url("./fonts/jetbrains-mono-v24-latin-600italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    src: url("./fonts/jetbrains-mono-v24-latin-700.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 700;
    src: url("./fonts/jetbrains-mono-v24-latin-700italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 800;
    src: url("./fonts/jetbrains-mono-v24-latin-800.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: 800;
    src: url("./fonts/jetbrains-mono-v24-latin-800italic.woff2") format("woff2");
}

/* orbitron - latin */
@font-face {
    font-display: swap;
    font-family: "Orbitron";
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/orbitron-v35-latin-regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Orbitron";
    font-style: normal;
    font-weight: 500;
    src: url("./fonts/orbitron-v35-latin-500.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Orbitron";
    font-style: normal;
    font-weight: 600;
    src: url("./fonts/orbitron-v35-latin-600.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Orbitron";
    font-style: normal;
    font-weight: 700;
    src: url("./fonts/orbitron-v35-latin-700.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Orbitron";
    font-style: normal;
    font-weight: 800;
    src: url("./fonts/orbitron-v35-latin-800.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Orbitron";
    font-style: normal;
    font-weight: 900;
    src: url("./fonts/orbitron-v35-latin-900.woff2") format("woff2");
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Loading bar animation for error toasts */
@keyframes shrink {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

dialog {
    margin: auto;
    position: fixed;
    inset: 0;
}

/* crossfade full page navigations instead of blanking between documents. Kept under reduced motion on purpose:
   it's an opacity fade, nothing moves, and it's gentler than the hard swap it replaces */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 120ms;
}