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

[data-palette="crimson"] {
    color-scheme: dark;
    --site-id: crimson;
    --site-label: "Crimson";
    --site-canvas: #0c0408;
    --site-panel: #1a0a12;
    --site-raised: #2a1020;
    --site-text: #ffe8f0;
    --site-muted: #e0a8bc;
    --site-line: #7a3050;
    --site-primary: #ff4d6a;
    --site-accent: #ff2bd6;
    --site-on-primary: #1a040c;
    --site-success: #3ddea0;
    --site-warning: #ffcc33;
    --site-danger: #ff3355;
    --site-info: #ff8ab0;
    --bs-body-bg: var(--site-canvas);
    --bs-body-bg-rgb: 12, 4, 8;
    --bs-body-color: var(--site-text);
    --bs-body-color-rgb: 255, 232, 240;
    --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: 255, 77, 106;
    --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="crimson"] .btn-primary {
    color: var(--site-on-primary);
}