@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Consumer projects can override these accent tokens after importing @panic/web-ui styles. */
    --accent-300: 168 155 191;
    --accent-400: 149 135 173;
    --accent-500: 125 111 152;
    --accent-600: 106 93 132;
    --accent-contrast: 255 255 255;
    --bg-page: #16121a;
    --surface-bg: rgba(24, 24, 27, 0.45);
    --surface-bg-strong: rgba(24, 24, 27, 0.62);
    --datepicker-menu-bg: #18181b;
    --surface-border: rgba(82, 82, 91, 0.6);
    --surface-divider: rgba(63, 63, 70, 0.85);
    --text-primary: #d5cfdf;
    --text-secondary: #bcb7c8;
    --text-muted: #a1a1aa;
    --text-soft: #8f8b9c;
    --field-bg: rgba(24, 24, 27, 0.6);
    --field-border: #3f3f46;
    --field-disabled-bg: rgba(24, 24, 27, 0.5);
    --field-disabled-border: #3f3f46;
    --field-disabled-text: #bbb6c3;
    --field-disabled-placeholder: #71717a;
    --field-selection-bg: rgb(var(--accent-500) / 0.42);
    --field-selection-text: var(--text-primary);
    --ghost-bg: rgba(24, 24, 27, 0.5);
    --ghost-border: #3f3f46;
    --ghost-hover: rgba(39, 39, 42, 0.7);
    --ghost-disabled-bg: rgba(24, 24, 27, 0.3);
    --ghost-disabled-border: #27272a;
    --ghost-disabled-text: #71717a;
    --primary-disabled-bg: #3f3f46;
    --primary-disabled-text: #a1a1aa;
    --table-head-bg: rgba(24, 24, 27, 0.8);
    --table-row-divider: #27272a;
    --auth-chrome-bg: rgba(24, 24, 27, 0.7);
    --auth-glass-blur: 22px;
    --auth-sidebar-mobile-width: min(86vw, 320px);
    --auth-right-sidebar-mobile-width: min(86vw, 340px);
    --error-border: rgba(252, 165, 165, 0.3);
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-text: #fecaca;
    --mdx-link: rgb(var(--accent-500));
    --mdx-link-hover: rgb(var(--accent-400));
    --mdx-inline-code-bg: #27272a;
    --mdx-inline-code-border: #3f3f46;
    --mdx-codeblock-bg: #18181b;
    --mdx-codeblock-border: #3f3f46;
    --mdx-codeblock-text: #e4e4e7;
    --mdx-codeblock-gutter: #a1a1aa;
    --mdx-codeblock-active: #27272a;
    --mdx-codeblock-selection: rgb(var(--accent-500) / 0.35);
    --mdx-codeblock-bracket: rgb(var(--accent-500) / 0.45);
    --shadow-glow: 0 0 0 1px rgba(63, 63, 70, 0.65), 0 18px 44px rgba(0, 0, 0, 0.45);
}

:root[data-theme='light'] {
    --bg-page: #f7f7fb;
    --surface-bg: rgba(255, 255, 255, 0.9);
    --surface-bg-strong: rgba(255, 255, 255, 0.98);
    --datepicker-menu-bg: #ffffff;
    --surface-border: rgba(161, 161, 170, 0.45);
    --surface-divider: rgba(212, 212, 216, 0.9);
    --text-primary: #52485c;
    --text-secondary: #514e60;
    --text-muted: #52525b;
    --text-soft: #71717a;
    --field-bg: rgba(253, 253, 253, 0.8);
    --field-border: #d4d4d8;
    --field-disabled-bg: rgba(248, 248, 248, 0.8);
    --field-disabled-border: #d7d7d7;
    --field-disabled-text: #71717a;
    --field-disabled-placeholder: #a1a1aa;
    --field-selection-bg: rgb(var(--accent-500) / 0.24);
    --field-selection-text: var(--text-primary);
    --ghost-bg: rgba(255, 255, 255, 0.88);
    --ghost-border: #d4d4d8;
    --ghost-hover: #f4f4f5;
    --ghost-disabled-bg: #f4f4f5;
    --ghost-disabled-border: #e4e4e7;
    --ghost-disabled-text: #a1a1aa;
    --primary-disabled-bg: #e4e4e7;
    --primary-disabled-text: #a1a1aa;
    --table-head-bg: #f4f4f5;
    --table-row-divider: #e4e4e7;
    --auth-chrome-bg: rgba(255, 255, 255, 0.7);
    --auth-glass-blur: 15px;
    --error-border: rgba(248, 113, 113, 0.35);
    --error-bg: rgba(254, 226, 226, 0.8);
    --error-text: #991b1b;
    --mdx-link: rgb(var(--accent-500));
    --mdx-link-hover: rgb(var(--accent-600));
    --mdx-inline-code-bg: #f4f4f5;
    --mdx-inline-code-border: #d4d4d8;
    --mdx-codeblock-bg: #ffffff;
    --mdx-codeblock-border: #d4d4d8;
    --mdx-codeblock-text: #18181b;
    --mdx-codeblock-gutter: #71717a;
    --mdx-codeblock-active: #f4f4f5;
    --mdx-codeblock-selection: rgb(var(--accent-500) / 0.22);
    --mdx-codeblock-bracket: rgb(var(--accent-500) / 0.32);
    --shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08);
}