@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/manrope-latin-variable.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/fonts/space-grotesk-latin-variable.woff2") format("woff2");
}

:root {
    --cb-font-body: "Manrope", "Segoe UI", sans-serif;
    --cb-font-display: "Space Grotesk", "Manrope", sans-serif;

    /* Shared type scale. Component and page styles must use these tokens. */
    --cb-text-metadata: 0.6875rem;
    --cb-text-label: 0.75rem;
    --cb-text-supporting: 0.8125rem;
    --cb-text-body: 0.875rem;
    --cb-text-card-title: 1rem;
    --cb-text-modal-title: 1.125rem;
    --cb-text-section-title: 1.375rem;
    --cb-text-page-title: 2rem;
    --cb-text-display-title: 2.5rem;
    --cb-line-metadata: 1rem;
    --cb-line-label: 1rem;
    --cb-line-supporting: 1.1875rem;
    --cb-line-body: 1.375rem;
    --cb-line-card-title: 1.375rem;
    --cb-line-modal-title: 1.5rem;
    --cb-line-section-title: 1.75rem;
    --cb-line-page-title: 2.375rem;
    --cb-line-display-title: 3rem;

    /* Touch-safe controls stay consistent even when compact density is enabled. */
    --cb-control-standard: 2.75rem;
    --cb-control-prominent: 3rem;
    --cb-control-kiosk: 3rem;
    --cb-icon-standard: 1.125rem;
    --cb-action-gap: 0.5rem;
    --cb-action-contrast: #ffffff;
    --cb-public-card-bg: rgba(255, 253, 247, 0.98);
    --cb-public-control-bg: rgba(255, 255, 255, 0.78);
    --cb-public-control-border: rgba(18, 21, 17, 0.16);

    --cb-graphite-950: #080a09;
    --cb-graphite-925: #0b0e0c;
    --cb-graphite-900: #0f1210;
    --cb-graphite-850: #131713;
    --cb-graphite-800: #181d19;
    --cb-graphite-750: #1d231e;
    --cb-graphite-700: #252c26;
    --cb-warm-50: #fbf8ef;
    --cb-warm-100: #f3f0e7;
    --cb-warm-200: #ddd9cf;
    --cb-warm-400: #a7aca5;
    --cb-warm-500: #899188;
    --cb-ink: #121511;

    --cb-lime: #c7ff4a;
    --cb-lime-strong: #b5f52f;
    --cb-lime-soft: rgba(199, 255, 74, 0.13);
    --cb-blue: #69a9ff;
    --cb-blue-strong: #4d91f1;
    --cb-blue-soft: rgba(105, 169, 255, 0.14);
    --cb-violet: #9388ff;
    --cb-violet-soft: rgba(147, 136, 255, 0.14);
    --cb-success: #5bd69b;
    --cb-success-soft: rgba(91, 214, 155, 0.14);
    --cb-warning: #f2bd58;
    --cb-warning-soft: rgba(242, 189, 88, 0.14);
    --cb-danger: #ff747c;
    --cb-danger-soft: rgba(255, 116, 124, 0.14);

    --cb-border: rgba(243, 240, 231, 0.1);
    --cb-border-strong: rgba(243, 240, 231, 0.18);
    --cb-border-hover: rgba(243, 240, 231, 0.28);
    --cb-overlay: rgba(3, 5, 4, 0.74);
    --cb-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.18);
    --cb-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.3);
    --cb-shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.46);

    --cb-color-scheme: dark;
    --cb-accent-foreground: #121511;
    --cb-link-hover: #9bc7ff;
    --cb-page-bg: #080a09;
    --cb-page-background:
        radial-gradient(circle at 88% -12%, rgba(105, 169, 255, 0.09), transparent 30rem),
        radial-gradient(circle at 12% 115%, rgba(199, 255, 74, 0.055), transparent 34rem),
        #080a09;
    --cb-grid-line: rgba(255, 255, 255, 0.018);
    --cb-sidebar-sheen: rgba(255, 255, 255, 0.025);
    --cb-sidebar-bg: rgba(11, 14, 12, 0.97);
    --cb-sidebar-shadow: 12px 0 42px rgba(0, 0, 0, 0.18);
    --cb-topbar-bg: rgba(8, 10, 9, 0.82);
    --cb-surface-1: rgba(19, 23, 19, 0.9);
    --cb-surface-1-elevated: rgba(19, 23, 19, 0.94);
    --cb-surface-popover: rgba(19, 23, 19, 0.985);
    --cb-surface-2: rgba(29, 35, 30, 0.94);
    --cb-surface-2-strong: rgba(29, 35, 30, 0.96);
    --cb-surface-column: rgba(15, 18, 16, 0.88);
    --cb-surface-disabled: rgba(15, 18, 16, 0.72);
    --cb-surface-subtle: rgba(255, 255, 255, 0.018);
    --cb-surface-quiet: rgba(255, 255, 255, 0.025);
    --cb-surface-control: rgba(255, 255, 255, 0.035);
    --cb-surface-hover: rgba(255, 255, 255, 0.06);
    --cb-surface-active: rgba(255, 255, 255, 0.085);
    --cb-surface-empty: rgba(19, 23, 19, 0.64);
    --cb-input-placeholder: #717a71;
    --cb-table-hover: rgba(199, 255, 74, 0.045);
    --cb-inspector-bg: rgba(15, 18, 16, 0.985);
    --cb-inspector-footer-bg: rgba(15, 18, 16, 0.96);
    --cb-scrim-bg: rgba(3, 5, 4, 0.58);
    --cb-mobile-scrim-bg: rgba(3, 5, 4, 0.7);
    --cb-hero-background:
        radial-gradient(circle at 88% 12%, rgba(105, 169, 255, 0.17), transparent 25rem),
        linear-gradient(135deg, #181d19, #0f1210);
    --cb-learning-hero-background:
        radial-gradient(circle at 84% 18%, rgba(147, 136, 255, 0.18), transparent 22rem),
        linear-gradient(135deg, #1d231e, #0f1210);
    --cb-alert-success-text: #a3f0ca;
    --cb-alert-warning-text: #f6d99d;
    --cb-alert-danger-text: #ffb2b7;
    --cb-alert-info-text: #b8d8ff;
    --cb-info-on-soft: #d8eaff;

    --cb-space-1: 0.25rem;
    --cb-space-2: 0.5rem;
    --cb-space-3: 0.75rem;
    --cb-space-4: 1rem;
    --cb-space-5: 1.25rem;
    --cb-space-6: 1.5rem;
    --cb-space-8: 2rem;
    --cb-space-10: 2.5rem;
    --cb-space-12: 3rem;

    --cb-radius-sm: 0.55rem;
    --cb-radius-md: 0.8rem;
    --cb-radius-lg: 1.1rem;
    --cb-radius-xl: 1.45rem;
    --cb-radius-pill: 999px;

    --cb-sidebar-expanded: 17rem;
    --cb-sidebar-collapsed: 4.5rem;
    --cb-topbar-height: 4.25rem;
    --cb-kiosk-dock-height: 4.75rem;
    --cb-motion-fast: 140ms;
    --cb-motion-medium: 210ms;
    --cb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-cb-theme="warm"] {
    --cb-graphite-950: #f3f0e8;
    --cb-graphite-925: #f7f4ec;
    --cb-graphite-900: #f8f5ed;
    --cb-graphite-850: #ffffff;
    --cb-graphite-800: #eeebe2;
    --cb-graphite-750: #e7e3d9;
    --cb-graphite-700: #d2cec3;
    --cb-warm-50: #172018;
    --cb-warm-100: #253027;
    --cb-warm-200: #374239;
    --cb-warm-300: #48544b;
    --cb-warm-400: #59655d;
    --cb-warm-500: #69746c;
    --cb-ink: #172018;
    --cb-lime: #5f7f18;
    --cb-lime-strong: #4f6b13;
    --cb-lime-soft: rgba(95, 127, 24, 0.12);
    --cb-blue: #2869b2;
    --cb-blue-strong: #1f5797;
    --cb-blue-soft: rgba(40, 105, 178, 0.1);
    --cb-violet: #6757b7;
    --cb-violet-soft: rgba(103, 87, 183, 0.1);
    --cb-success: #23734e;
    --cb-success-soft: rgba(35, 115, 78, 0.1);
    --cb-warning: #8a5b00;
    --cb-warning-soft: rgba(138, 91, 0, 0.1);
    --cb-danger: #ad3947;
    --cb-danger-soft: rgba(173, 57, 71, 0.09);
    --cb-border: rgba(23, 32, 24, 0.11);
    --cb-border-strong: rgba(23, 32, 24, 0.18);
    --cb-border-hover: rgba(23, 32, 24, 0.28);
    --cb-overlay: rgba(23, 32, 24, 0.46);
    --cb-shadow-sm: 0 8px 24px rgba(48, 53, 43, 0.07);
    --cb-shadow-md: 0 18px 50px rgba(48, 53, 43, 0.11);
    --cb-shadow-lg: 0 28px 80px rgba(36, 42, 34, 0.18);
    --cb-color-scheme: light;
    --cb-accent-foreground: #ffffff;
    --cb-link-hover: #174f8d;
    --cb-page-bg: #f3f0e8;
    --cb-page-background:
        radial-gradient(circle at 88% -12%, rgba(77, 145, 241, 0.1), transparent 30rem),
        radial-gradient(circle at 10% 112%, rgba(119, 153, 45, 0.08), transparent 34rem),
        #f3f0e8;
    --cb-grid-line: rgba(23, 32, 24, 0.026);
    --cb-sidebar-sheen: rgba(255, 255, 255, 0.5);
    --cb-sidebar-bg: rgba(255, 253, 247, 0.97);
    --cb-sidebar-shadow: 12px 0 38px rgba(48, 53, 43, 0.07);
    --cb-topbar-bg: rgba(248, 245, 237, 0.9);
    --cb-surface-1: rgba(255, 255, 255, 0.9);
    --cb-surface-1-elevated: rgba(255, 255, 255, 0.96);
    --cb-surface-popover: rgba(255, 255, 255, 0.99);
    --cb-surface-2: rgba(248, 246, 239, 0.96);
    --cb-surface-2-strong: #f1eee5;
    --cb-surface-column: rgba(236, 233, 224, 0.82);
    --cb-surface-disabled: rgba(232, 229, 221, 0.82);
    --cb-surface-subtle: rgba(23, 32, 24, 0.018);
    --cb-surface-quiet: rgba(23, 32, 24, 0.028);
    --cb-surface-control: rgba(255, 255, 255, 0.82);
    --cb-surface-hover: rgba(23, 32, 24, 0.055);
    --cb-surface-active: rgba(23, 32, 24, 0.09);
    --cb-surface-empty: rgba(255, 255, 255, 0.58);
    --cb-input-placeholder: #7b847d;
    --cb-table-hover: rgba(95, 127, 24, 0.055);
    --cb-inspector-bg: rgba(255, 255, 255, 0.99);
    --cb-inspector-footer-bg: rgba(255, 255, 255, 0.96);
    --cb-scrim-bg: rgba(23, 32, 24, 0.36);
    --cb-mobile-scrim-bg: rgba(23, 32, 24, 0.46);
    --cb-hero-background:
        radial-gradient(circle at 88% 12%, rgba(40, 105, 178, 0.12), transparent 25rem),
        linear-gradient(135deg, #ffffff, #edf2e8);
    --cb-learning-hero-background:
        radial-gradient(circle at 84% 18%, rgba(103, 87, 183, 0.13), transparent 22rem),
        linear-gradient(135deg, #ffffff, #f0ede7);
    --cb-alert-success-text: #1b6946;
    --cb-alert-warning-text: #775000;
    --cb-alert-danger-text: #982f3c;
    --cb-alert-info-text: #205a99;
    --cb-info-on-soft: #205a99;
}

:root[data-cb-theme="enterprise"] {
    --cb-graphite-950: #edf2f7;
    --cb-graphite-925: #f4f7fa;
    --cb-graphite-900: #f8fafc;
    --cb-graphite-850: #ffffff;
    --cb-graphite-800: #e7edf4;
    --cb-graphite-750: #dfe7ef;
    --cb-graphite-700: #ccd7e3;
    --cb-warm-50: #10243d;
    --cb-warm-100: #1c3048;
    --cb-warm-200: #30455d;
    --cb-warm-300: #455a70;
    --cb-warm-400: #5b6d80;
    --cb-warm-500: #68798b;
    --cb-ink: #10243d;
    --cb-lime: #2459c4;
    --cb-lime-strong: #1949a8;
    --cb-lime-soft: rgba(36, 89, 196, 0.11);
    --cb-blue: #2459c4;
    --cb-blue-strong: #1949a8;
    --cb-blue-soft: rgba(36, 89, 196, 0.1);
    --cb-violet: #6656b8;
    --cb-violet-soft: rgba(102, 86, 184, 0.1);
    --cb-success: #19714d;
    --cb-success-soft: rgba(25, 113, 77, 0.1);
    --cb-warning: #8b5b00;
    --cb-warning-soft: rgba(139, 91, 0, 0.1);
    --cb-danger: #b03645;
    --cb-danger-soft: rgba(176, 54, 69, 0.09);
    --cb-border: rgba(16, 36, 61, 0.11);
    --cb-border-strong: rgba(16, 36, 61, 0.19);
    --cb-border-hover: rgba(16, 36, 61, 0.3);
    --cb-overlay: rgba(16, 36, 61, 0.44);
    --cb-shadow-sm: 0 7px 20px rgba(26, 49, 76, 0.07);
    --cb-shadow-md: 0 17px 44px rgba(26, 49, 76, 0.12);
    --cb-shadow-lg: 0 28px 80px rgba(18, 39, 65, 0.2);
    --cb-color-scheme: light;
    --cb-accent-foreground: #ffffff;
    --cb-link-hover: #163f8d;
    --cb-page-bg: #edf2f7;
    --cb-page-background:
        radial-gradient(circle at 88% -12%, rgba(36, 89, 196, 0.11), transparent 30rem),
        #edf2f7;
    --cb-grid-line: rgba(16, 36, 61, 0.025);
    --cb-sidebar-sheen: rgba(255, 255, 255, 0.55);
    --cb-sidebar-bg: rgba(248, 250, 252, 0.98);
    --cb-sidebar-shadow: 12px 0 36px rgba(26, 49, 76, 0.08);
    --cb-topbar-bg: rgba(255, 255, 255, 0.92);
    --cb-surface-1: rgba(255, 255, 255, 0.94);
    --cb-surface-1-elevated: rgba(255, 255, 255, 0.98);
    --cb-surface-popover: #ffffff;
    --cb-surface-2: #f5f8fb;
    --cb-surface-2-strong: #edf2f7;
    --cb-surface-column: rgba(226, 233, 241, 0.84);
    --cb-surface-disabled: rgba(226, 233, 241, 0.84);
    --cb-surface-subtle: rgba(16, 36, 61, 0.018);
    --cb-surface-quiet: rgba(16, 36, 61, 0.028);
    --cb-surface-control: rgba(255, 255, 255, 0.9);
    --cb-surface-hover: rgba(16, 36, 61, 0.055);
    --cb-surface-active: rgba(16, 36, 61, 0.09);
    --cb-surface-empty: rgba(255, 255, 255, 0.66);
    --cb-input-placeholder: #718095;
    --cb-table-hover: rgba(36, 89, 196, 0.05);
    --cb-inspector-bg: #ffffff;
    --cb-inspector-footer-bg: rgba(255, 255, 255, 0.97);
    --cb-scrim-bg: rgba(16, 36, 61, 0.34);
    --cb-mobile-scrim-bg: rgba(16, 36, 61, 0.46);
    --cb-hero-background:
        radial-gradient(circle at 88% 12%, rgba(36, 89, 196, 0.13), transparent 25rem),
        linear-gradient(135deg, #ffffff, #edf3fb);
    --cb-learning-hero-background:
        radial-gradient(circle at 84% 18%, rgba(102, 86, 184, 0.12), transparent 22rem),
        linear-gradient(135deg, #ffffff, #f0f3fa);
    --cb-alert-success-text: #176542;
    --cb-alert-warning-text: #765000;
    --cb-alert-danger-text: #992e3b;
    --cb-alert-info-text: #194d9f;
    --cb-info-on-soft: #194d9f;
}

:root[data-cb-theme="minimal"] {
    --cb-graphite-950: #f7f6f2;
    --cb-graphite-925: #faf9f6;
    --cb-graphite-900: #fbfaf7;
    --cb-graphite-850: #ffffff;
    --cb-graphite-800: #efeee9;
    --cb-graphite-750: #e9e8e2;
    --cb-graphite-700: #d7d6cf;
    --cb-warm-50: #202621;
    --cb-warm-100: #303832;
    --cb-warm-200: #414a43;
    --cb-warm-300: #535d55;
    --cb-warm-400: #647067;
    --cb-warm-500: #727c74;
    --cb-ink: #202621;
    --cb-lime: #456654;
    --cb-lime-strong: #385443;
    --cb-lime-soft: rgba(69, 102, 84, 0.1);
    --cb-blue: #326a7a;
    --cb-blue-strong: #285866;
    --cb-blue-soft: rgba(50, 106, 122, 0.09);
    --cb-violet: #706092;
    --cb-violet-soft: rgba(112, 96, 146, 0.09);
    --cb-success: #2c7251;
    --cb-success-soft: rgba(44, 114, 81, 0.09);
    --cb-warning: #865d14;
    --cb-warning-soft: rgba(134, 93, 20, 0.09);
    --cb-danger: #a6424c;
    --cb-danger-soft: rgba(166, 66, 76, 0.08);
    --cb-border: rgba(32, 38, 33, 0.09);
    --cb-border-strong: rgba(32, 38, 33, 0.15);
    --cb-border-hover: rgba(32, 38, 33, 0.24);
    --cb-overlay: rgba(32, 38, 33, 0.4);
    --cb-shadow-sm: 0 5px 18px rgba(44, 51, 45, 0.045);
    --cb-shadow-md: 0 14px 38px rgba(44, 51, 45, 0.08);
    --cb-shadow-lg: 0 24px 70px rgba(38, 45, 39, 0.15);
    --cb-color-scheme: light;
    --cb-accent-foreground: #ffffff;
    --cb-link-hover: #244e5a;
    --cb-page-bg: #f7f6f2;
    --cb-page-background: #f7f6f2;
    --cb-grid-line: rgba(32, 38, 33, 0.016);
    --cb-sidebar-sheen: rgba(255, 255, 255, 0.35);
    --cb-sidebar-bg: rgba(255, 255, 255, 0.98);
    --cb-sidebar-shadow: 10px 0 30px rgba(44, 51, 45, 0.045);
    --cb-topbar-bg: rgba(250, 249, 246, 0.94);
    --cb-surface-1: rgba(255, 255, 255, 0.96);
    --cb-surface-1-elevated: rgba(255, 255, 255, 0.99);
    --cb-surface-popover: #ffffff;
    --cb-surface-2: #faf9f6;
    --cb-surface-2-strong: #f1f0eb;
    --cb-surface-column: rgba(235, 234, 228, 0.76);
    --cb-surface-disabled: rgba(235, 234, 228, 0.82);
    --cb-surface-subtle: rgba(32, 38, 33, 0.014);
    --cb-surface-quiet: rgba(32, 38, 33, 0.02);
    --cb-surface-control: rgba(255, 255, 255, 0.92);
    --cb-surface-hover: rgba(32, 38, 33, 0.045);
    --cb-surface-active: rgba(32, 38, 33, 0.075);
    --cb-surface-empty: rgba(255, 255, 255, 0.62);
    --cb-input-placeholder: #7c847e;
    --cb-table-hover: rgba(69, 102, 84, 0.045);
    --cb-inspector-bg: #ffffff;
    --cb-inspector-footer-bg: rgba(255, 255, 255, 0.98);
    --cb-scrim-bg: rgba(32, 38, 33, 0.3);
    --cb-mobile-scrim-bg: rgba(32, 38, 33, 0.4);
    --cb-hero-background: linear-gradient(135deg, #ffffff, #f4f5f0);
    --cb-learning-hero-background: linear-gradient(135deg, #ffffff, #f6f3f7);
    --cb-alert-success-text: #256446;
    --cb-alert-warning-text: #73500e;
    --cb-alert-danger-text: #923640;
    --cb-alert-info-text: #2b5e6c;
    --cb-info-on-soft: #2b5e6c;
}

:root[data-cb-theme="graphite"] {
    --cb-color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:focus-visible {
    outline: 3px solid var(--cb-lime);
    outline-offset: 3px;
}

::selection {
    color: var(--cb-ink);
    background: var(--cb-lime);
}

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