// Standard Sourcegraph UI theme (includes two standard modes
// light and dark color scheme)
[data-sg-theme='standard'] {
    // Common for both modes CSS design tokens
    --sg-sys-space: 1rem;
    --sg-sys-border-radius: 4px;
    --sg-sys-font-size: 1rem;
    --sg-sys-font-family: var(--sg-ref-font-family-sans);
    --sg-sys-font-family-code: var(--sg-ref-font-family-monospace);

    &[data-sg-theme-mode='light'] {
        --sg-sys-primary: var(--sg-ref-blue-700);
        --sg-sys-primary-foreground: var(--sg-ref-gray-100);
        --sg-sys-secondary: var(--sg-ref-gray-400);
        --sg-sys-secondary-foreground: var(--sg-ref-gray-100);
        --sg-sys-destructive: var(--sg-ref-red-600);
        --sg-sys-background: white;
        --sg-sys-foreground: var(--sg-ref-gray-1200);
        --sg-sys-card-background: var(--sg-ref-gray-200);
        --sg-sys-card-foreground: var(--sg-ref-gray-1000);
        --sg-sys-popover-background: var(--sg-ref-gray-100);
        --sg-sys-popover-foreground: var(--sg-ref-gray-700);
        --sg-sys-muted-foreground: var(--sg-ref-gray-700);
        --sg-sys-accent: var(--sg-ref-blue-600);
        --sg-sys-accent-foreground: var(--sg-ref-gray-100);
        --sg-sys-border-color: var(--sg-ref-gray-300);
        --sg-sys-border-subtle: var(--sg-ref-gray-200);
        --sg-sys-input-background: white;
        --sg-sys-shadow-color: var(--sg-ref-gray-400);
    }

    &[data-sg-theme-mode='dark'] {
        --sg-sys-primary: var(--sg-ref-blue-800);
        --sg-sys-primary-foreground: var(--sg-ref-gray-100);
        --sg-sys-secondary: var(--sg-ref-gray-700);
        --sg-sys-secondary-foreground: var(--sg-ref-gray-100);
        --sg-sys-destructive: var(--sg-ref-red-600);
        --sg-sys-background: var(--sg-ref-gray-900);
        --sg-sys-foreground: var(--sg-ref-gray-100);
        --sg-sys-card-background: var(--sg-ref-gray-1000);
        --sg-sys-card-foreground: var(--sg-ref-gray-100);
        --sg-sys-popover-background: var(--sg-ref-gray-900);
        --sg-sys-popover-foreground: var(--sg-ref-gray-100);
        --sg-sys-muted-foreground: var(--sg-ref-gray-500);
        --sg-sys-accent: var(--sg-ref-blue-500);
        --sg-sys-accent-foreground: var(--sg-ref-gray-100);
        --sg-sys-border-color: var(--sg-ref-gray-700);
        --sg-sys-border-subtle: var(--sg-ref-gray-800);
        --sg-sys-input-background: var(--sg-ref-gray-900);
        --sg-sys-shadow-color: var(--sg-ref-gray-1200);

        // Special override
        --sg-sys-border-active-color: var(--sg-ref-blue-600);
        --sg-sys-focus-shadow: 0 0 0 3px
            color-mix(in oklch, var(--sg-sys-accent) 70%, transparent);
    }
}