html[data-theme="arcade"] {
    --arc-p1: #f2f2f2;
    --arc-line: rgba(242, 242, 242, 0.22);
    --arc-bg-rgb: 4, 4, 6;
    --arc-fg-rgb: 242, 242, 242;
    --arc-dim-rgb: 139, 139, 152;
    --arc-p1-rgb: 242, 242, 242;
    --arc-p2-rgb: 255, 216, 77;
    --arc-p3-rgb: 111, 214, 255;
    --arc-p4-rgb: 255, 122, 168;
    --arc-bg: #040406;
    --arc-fg: #f2f2f2;
    --arc-dim: #8b8b98;
    --arc-p2: #ffd84d;
    --arc-p3: #6fd6ff;
    --arc-p4: #ff7aa8;
    --arc-good: #7dff9b;
    --arc-good-rgb: 125, 255, 155;
    --arc-bad: #ff5c7a;
    --arc-bad-rgb: 255, 92, 122;
    --arc-wild: #ffd84d;
    --arc-wild-rgb: 255, 216, 77;
    --arc-link: #6fd6ff;
    --arc-link-rgb: 111, 214, 255;
    --arc-patreon: #ff7aa8;
    --arc-patreon-rgb: 255, 122, 168;
    --arc-hl-a: #ffd84d;
    --arc-hl-b: #ff7aa8;
    --arc-hl-b-rgb: 255, 122, 168;
    --arc-glow: rgba(255, 255, 255, 0.45);
    --arc-pixel: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
    --arc-text: 'VT323', ui-monospace, 'Courier New', monospace;
}

html[data-theme="arcade"][data-screen="phosphor"] {
    --arc-line: rgba(77, 255, 136, 0.25);
    --arc-p1: #4dff88;
    --arc-bg-rgb: 1, 5, 2;
    --arc-fg-rgb: 77, 255, 136;
    --arc-dim-rgb: 47, 156, 88;
    --arc-p1-rgb: 77, 255, 136;
    --arc-p2-rgb: 212, 255, 92;
    --arc-p3-rgb: 47, 224, 196;
    --arc-p4-rgb: 182, 255, 208;
    --arc-bg: #010502;
    --arc-fg: #4dff88;
    --arc-dim: #2f9c58;
    --arc-p2: #d4ff5c;
    --arc-p3: #2fe0c4;
    --arc-p4: #b6ffd0;
    --arc-good: #b6ffd0;
    --arc-good-rgb: 182, 255, 208;
    --arc-bad: #ffe45c;
    --arc-bad-rgb: 255, 228, 92;
    --arc-wild: #b6ffd0;
    --arc-wild-rgb: 182, 255, 208;
    --arc-link: #2fe0c4;
    --arc-link-rgb: 47, 224, 196;
    --arc-patreon: #d4ff5c;
    --arc-patreon-rgb: 212, 255, 92;
    --arc-hl-a: #b6ffd0;
    --arc-hl-b: #4dff88;
    --arc-hl-b-rgb: 77, 255, 136;
    --arc-glow: rgba(77, 255, 136, 0.6);
}

html[data-theme="arcade"][data-screen="amber"] {
    --arc-line: rgba(255, 179, 26, 0.25);
    --arc-p1: #ffb31a;
    --arc-bg-rgb: 6, 3, 0;
    --arc-fg-rgb: 255, 179, 26;
    --arc-dim-rgb: 169, 116, 20;
    --arc-p1-rgb: 255, 179, 26;
    --arc-p2-rgb: 255, 240, 194;
    --arc-p3-rgb: 255, 106, 61;
    --arc-p4-rgb: 255, 211, 107;
    --arc-bg: #060300;
    --arc-fg: #ffb31a;
    --arc-dim: #a97414;
    --arc-p2: #fff0c2;
    --arc-p3: #ff6a3d;
    --arc-p4: #ffd36b;
    --arc-good: #fff0c2;
    --arc-good-rgb: 255, 240, 194;
    --arc-bad: #ff6a3d;
    --arc-bad-rgb: 255, 106, 61;
    --arc-wild: #ffe2a3;
    --arc-wild-rgb: 255, 226, 163;
    --arc-link: #ffd36b;
    --arc-link-rgb: 255, 211, 107;
    --arc-patreon: #ff6a3d;
    --arc-patreon-rgb: 255, 106, 61;
    --arc-hl-a: #fff0c2;
    --arc-hl-b: #ffb31a;
    --arc-hl-b-rgb: 255, 179, 26;
    --arc-glow: rgba(255, 179, 26, 0.55);
}

html[data-theme="arcade"][data-screen="synthwave"] {
    --arc-line: rgba(160, 110, 255, 0.35);
    --arc-p1: #22e6ff;
    --arc-bg-rgb: 7, 0, 15;
    --arc-fg-rgb: 246, 232, 255;
    --arc-dim-rgb: 165, 132, 200;
    --arc-p1-rgb: 34, 230, 255;
    --arc-p2-rgb: 255, 63, 210;
    --arc-p3-rgb: 255, 233, 92;
    --arc-p4-rgb: 98, 255, 176;
    --arc-bg: #07000f;
    --arc-fg: #f6e8ff;
    --arc-dim: #a584c8;
    --arc-p2: #ff3fd2;
    --arc-p3: #ffe95c;
    --arc-p4: #62ffb0;
    --arc-good: #62ffb0;
    --arc-good-rgb: 98, 255, 176;
    --arc-bad: #ff4f6d;
    --arc-bad-rgb: 255, 79, 109;
    --arc-wild: #ffe95c;
    --arc-wild-rgb: 255, 233, 92;
    --arc-link: #22e6ff;
    --arc-link-rgb: 34, 230, 255;
    --arc-patreon: #ff3fd2;
    --arc-patreon-rgb: 255, 63, 210;
    --arc-hl-a: #22e6ff;
    --arc-hl-b: #ff3fd2;
    --arc-hl-b-rgb: 255, 63, 210;
    --arc-glow: rgba(255, 63, 210, 0.5);
}

html[data-theme="arcade"] {
    --ds-bg: var(--arc-bg);
    --ds-bg-rgb: var(--arc-bg-rgb);
    --ds-text-1-rgb: var(--arc-fg-rgb);
    --ds-bg-inset: color-mix(in srgb, var(--arc-fg) 2%, var(--arc-bg));
    --ds-surface-1: color-mix(in srgb, var(--arc-fg) 3%, var(--arc-bg));
    --ds-surface-2: color-mix(in srgb, var(--arc-fg) 5%, var(--arc-bg));
    --ds-surface-3: color-mix(in srgb, var(--arc-fg) 8%, var(--arc-bg));
    --ds-hover: color-mix(in srgb, var(--arc-fg) 11%, var(--arc-bg));
    --ds-pressed: color-mix(in srgb, var(--arc-fg) 15%, var(--arc-bg));
    --ds-bg-deep: color-mix(in srgb, #000 45%, var(--arc-bg));
    --ds-bg-code: color-mix(in srgb, var(--arc-fg) 4%, var(--arc-bg));
    --ds-preview: var(--arc-wild);
    --ds-preview-rgb: var(--arc-wild-rgb);
    --ds-raised: color-mix(in srgb, var(--arc-fg) 3%, transparent);
    --ds-interactive: color-mix(in srgb, var(--arc-fg) 6%, transparent);
    --ds-border-1: color-mix(in srgb, var(--arc-fg) 24%, var(--arc-bg));
    --ds-border-2: color-mix(in srgb, var(--arc-fg) 40%, var(--arc-bg));
    --ds-line-1: color-mix(in srgb, var(--arc-fg) 16%, transparent);
    --ds-line-2: color-mix(in srgb, var(--arc-fg) 32%, transparent);
    --ds-text-1: var(--arc-fg);
    --ds-text-2: color-mix(in srgb, var(--arc-fg) 76%, var(--arc-bg));
    --ds-text-3: var(--arc-dim);
    --ds-text-placeholder: var(--arc-dim);
    --ds-accent: var(--arc-fg);
    --ds-accent-hover: color-mix(in srgb, var(--arc-fg) 82%, var(--arc-bg));
    --ds-action: var(--arc-wild);
    --ds-action-hover: color-mix(in srgb, var(--arc-wild) 82%, var(--arc-fg));
    --ds-action-rgb: var(--arc-wild-rgb);
    --ds-link: var(--arc-link);
    --ds-link-rgb: var(--arc-link-rgb);
    --ds-link-dim: rgba(var(--arc-link-rgb), 0.15);
    --ds-success: var(--arc-good);
    --ds-success-rgb: var(--arc-good-rgb);
    --ds-success-hover: var(--arc-good);
    --ds-success-soft: rgba(var(--arc-good-rgb), 0.12);
    --ds-warning: var(--arc-wild);
    --ds-warning-rgb: var(--arc-wild-rgb);
    --ds-danger: var(--arc-bad);
    --ds-danger-rgb: var(--arc-bad-rgb);
    --ds-info: var(--arc-link);
    --ds-patreon: var(--arc-patreon);
    --ds-patreon-rgb: var(--arc-patreon-rgb);
    --ds-violet: var(--arc-hl-b);
    --ds-violet-rgb: var(--arc-hl-b-rgb);
    --ds-focus: 0 0 0 2px var(--arc-bg), 0 0 0 4px var(--arc-wild);
    --ds-radius-1: 0;
    --ds-radius-2: 0;
    --ds-radius-3: 0;
    --ds-radius-4: 0;
    --ds-font-sans: var(--arc-text);
    --ds-font-mono: var(--arc-text);
    --ds-shadow-pop: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 12%, transparent);
    --ds-shadow-modal: 0 0 0 2px var(--ds-line-2), 10px 10px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    --bs-body-bg: var(--arc-bg);
    --bs-body-color: var(--arc-fg);
    --bs-border-color: var(--ds-border-1);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-font-sans-serif: var(--arc-text);
    --bs-font-monospace: var(--arc-text);
    color-scheme: dark;
}