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

[data-palette="arctic"] {
    color-scheme: dark;
    --site-id: arctic;
    --site-label: "Arctic";
    --site-canvas: #04080e;
    --site-panel: #0c1420;
    --site-raised: #122033;
    --site-text: #f3fbff;
    --site-muted: #b7d0e4;
    --site-line: #3d6288;
    --site-primary: #2ee6ff;
    --site-accent: #7eb6ff;
    --site-on-primary: #041018;
    --site-success: #3ee0a0;
    --site-warning: #ffd24a;
    --site-danger: #ff5d73;
    --site-info: #9af6ff;
    --bs-body-bg: var(--site-canvas);
    --bs-body-bg-rgb: 4, 8, 14;
    --bs-body-color: var(--site-text);
    --bs-body-color-rgb: 243, 251, 255;
    --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: 46, 230, 255;
    --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="arctic"] .btn-primary {
    color: var(--site-on-primary);
}