:root {
    --r2-grey-0: #ffffff;
    --r2-grey-50: #f7f8fa;
    --r2-grey-100: #eef0f3;
    --r2-grey-200: #e1e4e9;
    --r2-grey-300: #c9ced6;
    --r2-grey-400: #9aa2ad;
    --r2-grey-500: #6b7480;
    --r2-grey-600: #4b535d;
    --r2-grey-700: #343a42;
    --r2-grey-800: #21262c;
    --r2-grey-900: #12151a;

    --r2-blue-100: #e8f0f9;
    --r2-blue-300: #98b4d4;
    --r2-blue-500: #3a79b8;
    --r2-blue-600: #2e629d;
    --r2-blue-700: #24507f;

    --r2-green-500: #2f8c2f;
    --r2-green-100: #dff3df;
    --r2-red-100: #ffeeee;
    --r2-red-500: #c8281e;
    --r2-red-600: #a51f17;
    --r2-amber-100: #f7f3cf;
    --r2-amber-300: #d3d37a;

    --r2-color-canvas: var(--r2-grey-0);
    --r2-color-surface: var(--r2-grey-50);
    --r2-color-surface-raised: var(--r2-grey-0);
    --r2-color-surface-sunken: var(--r2-grey-100);

    --r2-color-border: var(--r2-grey-200);
    --r2-color-border-strong: var(--r2-grey-300);

    --r2-color-text: var(--r2-grey-800);
    --r2-color-text-muted: var(--r2-grey-500);
    --r2-color-text-disabled: var(--r2-grey-400);
    --r2-color-text-inverse: var(--r2-grey-0);

    --r2-color-accent: var(--r2-blue-500);
    --r2-color-accent-hover: var(--r2-blue-600);
    --r2-color-accent-subtle: var(--r2-blue-100);
    --r2-color-link: var(--r2-blue-600);
    --r2-color-link-hover: var(--r2-blue-700);

    --r2-color-danger: var(--r2-red-500);
    --r2-color-danger-hover: var(--r2-red-600);
    --r2-color-danger-subtle: var(--r2-red-100);
    --r2-color-success: var(--r2-green-500);
    --r2-color-success-subtle: var(--r2-green-100);
    --r2-color-warning: var(--r2-amber-300);
    --r2-color-warning-subtle: var(--r2-amber-100);

    --r2-color-focus-ring: var(--r2-blue-500);
    --r2-color-scrim: rgba(18, 21, 26, 0.45);

    --r2-space-1: 2px;
    --r2-space-2: 4px;
    --r2-space-3: 8px;
    --r2-space-4: 12px;
    --r2-space-5: 16px;
    --r2-space-6: 24px;
    --r2-space-7: 32px;

    --r2-radius-sm: 3px;
    --r2-radius-md: 6px;
    --r2-radius-lg: 10px;
    --r2-radius-pill: 999px;

    /*
     * --r2-font-legacy is what the platform actually renders in: body sets it,
     * and everything from the bars to the page tables inherits it, so there is
     * one typeface on screen. The two below are defined and deliberately unused
     * - they are here for when the rest of R2 moves off Verdana, not before.
     * Pointing body at --r2-font-sans on its own only splits the platform in
     * two, because jqWidgets and jQuery UI carry Verdana of their own.
     */
    --r2-font-legacy: Verdana, Arial, sans-serif;

    --r2-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --r2-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

    --r2-text-xs: 11px;
    --r2-text-sm: 12px;
    --r2-text-md: 13px;
    --r2-text-lg: 15px;
    --r2-text-xl: 18px;

    --r2-line-tight: 1.25;
    --r2-line-normal: 1.45;

    --r2-weight-regular: 400;
    --r2-weight-medium: 500;
    --r2-weight-bold: 700;

    --r2-shadow-sm: 0 1px 2px rgba(18, 21, 26, 0.10);
    --r2-shadow-md: 0 2px 8px rgba(18, 21, 26, 0.14);
    --r2-shadow-lg: 0 8px 28px rgba(18, 21, 26, 0.22);

    --r2-motion-fast: 120ms;
    --r2-motion-base: 200ms;
    --r2-motion-drawer: 220ms;
    --r2-motion-ease: cubic-bezier(0.2, 0, 0, 1);

    --r2-bar-height-top: 36px;
    --r2-bar-height-bottom: 24px;
    --r2-drawer-width: 260px;
    --r2-hit-target: 36px;

    --r2-z-sticky: 100;
    --r2-z-bar: 900;
    --r2-z-scrim: 950;
    --r2-z-drawer: 960;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --r2-motion-fast: 1ms;
        --r2-motion-base: 1ms;
        --r2-motion-drawer: 1ms;
    }
}