/* Palette: mono. Set data-palette="mono" on the page or on a preview card. */

[data-palette="mono"] {
    color-scheme: dark;
    --site-id: mono;
    --site-label: "Mono";
    --site-canvas: #161616;
    --site-panel: #222222;
    --site-raised: #2e2e2e;
    --site-text: #f2f2f2;
    --site-muted: #a6a6a6;
    --site-line: #5e5e5e;
    --site-primary: #d9d9d9;
    --site-accent: #8f8f8f;
    --site-on-primary: #1a1a1a;
    --site-success: #c8c8c8;
    --site-warning: #b0b0b0;
    --site-danger: #737373;
    --site-info: #e4e4e4;
    --bs-body-bg: var(--site-canvas);
    --bs-body-bg-rgb: 22, 22, 22;
    --bs-body-color: var(--site-text);
    --bs-body-color-rgb: 242, 242, 242;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--site-muted);
    --bs-secondary-bg: var(--site-panel);
    --bs-tertiary-bg: var(--site-raised);
    --bs-heading-color: var(--site-text);
    --bs-border-color: var(--site-line);
    --bs-primary: var(--site-primary);
    --bs-primary-rgb: 217, 217, 217;
    --bs-link-color: var(--site-primary);
    --bs-link-hover-color: var(--site-accent);
    --bs-card-bg: var(--site-panel);
    --bs-card-color: var(--site-text);
    --bs-card-border-color: var(--site-line);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--site-primary) 18%, var(--site-canvas));
    --bs-primary-border-subtle: color-mix(in srgb, var(--site-primary) 48%, var(--site-canvas));
    --bs-primary-text-emphasis: var(--site-primary);
    --bs-success-bg-subtle: color-mix(in srgb, var(--site-success) 18%, var(--site-canvas));
    --bs-success-border-subtle: color-mix(in srgb, var(--site-success) 48%, var(--site-canvas));
    --bs-success-text-emphasis: var(--site-success);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--site-warning) 18%, var(--site-canvas));
    --bs-warning-border-subtle: color-mix(in srgb, var(--site-warning) 48%, var(--site-canvas));
    --bs-warning-text-emphasis: var(--site-warning);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--site-danger) 18%, var(--site-canvas));
    --bs-danger-border-subtle: color-mix(in srgb, var(--site-danger) 48%, var(--site-canvas));
    --bs-danger-text-emphasis: var(--site-danger);
    --bs-info-bg-subtle: color-mix(in srgb, var(--site-info) 18%, var(--site-canvas));
    --bs-info-border-subtle: color-mix(in srgb, var(--site-info) 48%, var(--site-canvas));
    --bs-info-text-emphasis: var(--site-info);
    background-color: var(--site-canvas);
    color: var(--site-text);
}

[data-palette="mono"] .btn-primary {
    color: var(--site-on-primary);
}