html[data-theme="green"] {
    --color-coper: #34d399;
    --color-Coper: #34d399;
    --color-tile: #0b3d2e;
    --color-background: #06281f;
    --color-ink: #f1fff8;
    --color-muted: #b7e4d0;
    --color-danger: #fb7185;
    --color-teal: #5eead4;
    --color-1: #a7f3d0;
    --color-4: #10b981;
    --color-Button: #0f513f;
    --theme-bg-start: #031b16;
    --theme-bg-end: #0e5a43;
    --theme-card-bg: rgba(11, 61, 46, 0.92);
    --theme-soft-bg: rgba(16, 185, 129, 0.14);
    --theme-action-text: #052016;
}

html[data-theme="orange"] {
    --color-coper: #f97316;
    --color-Coper: #f97316;
    --color-tile: #4a1f09;
    --color-background: #2d1307;
    --color-ink: #fff7ed;
    --color-muted: #fed7aa;
    --color-danger: #ef4444;
    --color-teal: #facc15;
    --color-1: #fdba74;
    --color-4: #ea580c;
    --color-Button: #5f2a0b;
    --theme-bg-start: #190a03;
    --theme-bg-end: #7c2d12;
    --theme-card-bg: rgba(74, 31, 9, 0.92);
    --theme-soft-bg: rgba(249, 115, 22, 0.14);
    --theme-action-text: #1f0a02;
}

html[data-theme="grey"] {
    --color-coper: #cbd5e1;
    --color-Coper: #cbd5e1;
    --color-tile: #374151;
    --color-background: #1f2937;
    --color-ink: #f8fafc;
    --color-muted: #cbd5e1;
    --color-danger: #f87171;
    --color-teal: #94a3b8;
    --color-1: #e5e7eb;
    --color-4: #9ca3af;
    --color-Button: #4b5563;
    --theme-bg-start: #111827;
    --theme-bg-end: #475569;
    --theme-card-bg: rgba(55, 65, 81, 0.92);
    --theme-soft-bg: rgba(148, 163, 184, 0.14);
    --theme-action-text: #111827;
}

html[data-theme="white"] {
    --color-coper: #2563eb;
    --color-Coper: #2563eb;
    --color-tile: #ffffff;
    --color-background: #eef4ff;
    --color-ink: #111827;
    --color-muted: #475569;
    --color-danger: #dc2626;
    --color-teal: #0f766e;
    --color-1: #dbeafe;
    --color-4: #60a5fa;
    --color-Button: #dbeafe;
    --theme-bg-start: #f8fafc;
    --theme-bg-end: #dbeafe;
    --theme-card-bg: rgba(255, 255, 255, 0.94);
    --theme-soft-bg: rgba(37, 99, 235, 0.1);
    --theme-action-text: #ffffff;
}

html[data-theme="dark"] {
    --color-coper: #a78bfa;
    --color-Coper: #a78bfa;
    --color-tile: #18181b;
    --color-background: #0f1117;
    --color-ink: #f4f4f5;
    --color-muted: #a1a1aa;
    --color-danger: #fb7185;
    --color-teal: #38bdf8;
    --color-1: #71717a;
    --color-4: #8b5cf6;
    --color-Button: #27272a;
    --theme-bg-start: #09090b;
    --theme-bg-end: #27272a;
    --theme-card-bg: rgba(24, 24, 27, 0.94);
    --theme-soft-bg: rgba(167, 139, 250, 0.12);
    --theme-action-text: #100d1f;
}

html[data-theme="pink"] {
    --color-coper: #f472b6;
    --color-Coper: #f472b6;
    --color-tile: #4a1236;
    --color-background: #2a0b22;
    --color-ink: #fff1f8;
    --color-muted: #fbcfe8;
    --color-danger: #fb7185;
    --color-teal: #c084fc;
    --color-1: #f9a8d4;
    --color-4: #db2777;
    --color-Button: #831843;
    --theme-bg-start: #1f071a;
    --theme-bg-end: #831843;
    --theme-card-bg: rgba(74, 18, 54, 0.92);
    --theme-soft-bg: rgba(244, 114, 182, 0.14);
    --theme-action-text: #270312;
}

html[data-theme="candy"] {
    --color-coper: #fb7185;
    --color-Coper: #fb7185;
    --color-tile: #fff7fb;
    --color-background: #fdf2f8;
    --color-ink: #401326;
    --color-muted: #7c2d4f;
    --color-danger: #e11d48;
    --color-teal: #22d3ee;
    --color-1: #fbcfe8;
    --color-4: #a78bfa;
    --color-Button: #fde7f3;
    --theme-bg-start: #fff7fb;
    --theme-bg-end: #cffafe;
    --theme-card-bg: rgba(255, 247, 251, 0.94);
    --theme-soft-bg: rgba(34, 211, 238, 0.16);
    --theme-action-text: #401326;
}

html[data-theme] body {
    color: var(--color-ink);
    background: linear-gradient(135deg, var(--theme-bg-start) 0%, var(--color-background) 52%, var(--theme-bg-end) 100%);
}

html[data-theme] .home-background {
    background: var(--color-background);
}

html[data-theme] .metric,
html[data-theme] .record-card,
html[data-theme] .account-card,
html[data-theme] .stats-panel,
html[data-theme] .result-card,
html[data-theme] .edit-card,
html[data-theme] .averages-card,
html[data-theme] .target-ranking-card,
html[data-theme] .average-stat,
html[data-theme] .home-setup-card,
html[data-theme] .side-nav,
html[data-theme] .tile,
html[data-theme] .trainer-card {
    background: var(--theme-card-bg);
}

html[data-theme] .metric,
html[data-theme] .record-card,
html[data-theme] .account-card,
html[data-theme] .stats-panel,
html[data-theme] .edit-card,
html[data-theme] .averages-card,
html[data-theme] .target-ranking-card,
html[data-theme] .average-stat,
html[data-theme] .home-setup-card,
html[data-theme] .tile,
html[data-theme] .trainer-card {
    outline-color: var(--color-coper);
}

html[data-theme] .btn-back,
html[data-theme] .btn-action,
html[data-theme] .btn-refresh,
html[data-theme] .btn-filter,
html[data-theme] .btn-small,
html[data-theme] .home-link,
html[data-theme] .game-nav-item,
html[data-theme] .utility-nav a,
html[data-theme] .home-field input,
html[data-theme] .home-field select,
html[data-theme] .home-toggle,
html[data-theme] .account-card input,
html[data-theme] .edit-card input,
html[data-theme] .edit-card select,
html[data-theme] .edit-card textarea {
    border-color: var(--color-coper);
}

html[data-theme] .btn-back,
html[data-theme] .btn-action,
html[data-theme] .btn-refresh,
html[data-theme] .btn-filter,
html[data-theme] .btn-small,
html[data-theme] .home-link,
html[data-theme] .game-nav-item,
html[data-theme] .utility-nav a {
    color: var(--color-coper);
}

html[data-theme] .btn-back:hover,
html[data-theme] .btn-action:hover,
html[data-theme] .btn-refresh:hover,
html[data-theme] .btn-filter.active,
html[data-theme] .btn-small:hover,
html[data-theme] .home-link:hover,
html[data-theme] .game-nav-item.active,
html[data-theme] .game-nav-item:hover,
html[data-theme] .utility-nav a.active,
html[data-theme] .utility-nav a:hover,
html[data-theme] .start-button,
html[data-theme] .new-game-start,
html[data-theme] .auth-primary,
html[data-theme] .btn-save {
    background: var(--color-coper);
    border-color: var(--color-coper);
    color: var(--theme-action-text);
}

html[data-theme] .btn-header-fullscreen,
html[data-theme] .btn-header-fullscreen:hover,
html[data-theme] .btn-header-fullscreen:focus,
html[data-theme] .btn-header-fullscreen:active {
    background: transparent;
    border-color: var(--color-coper);
    color: var(--color-coper);
    -webkit-text-fill-color: var(--color-coper);
}

html[data-theme] .record-card,
html[data-theme] .average-row,
html[data-theme] .result-card {
    border-left-color: var(--color-teal);
}

html[data-theme] .record-row span,
html[data-theme] .target-ranking-row span,
html[data-theme] .average-row span,
html[data-theme] .metric-label,
html[data-theme] .section-heading p,
html[data-theme] .profile-user,
html[data-theme] .account-card label,
html[data-theme] .empty-state {
    color: var(--color-muted);
}

html[data-theme] .metric-value,
html[data-theme] .record-row strong,
html[data-theme] .target-ranking-row strong,
html[data-theme] .average-row strong,
html[data-theme] .account-card input,
html[data-theme] .edit-card input,
html[data-theme] .edit-card select,
html[data-theme] .edit-card textarea,
html[data-theme] .home-field input,
html[data-theme] .home-field select,
html[data-theme] .home-toggle {
    color: var(--color-ink);
}

html[data-theme] .account-card input,
html[data-theme] .edit-card input,
html[data-theme] .edit-card select,
html[data-theme] .edit-card textarea,
html[data-theme] .home-field input,
html[data-theme] .home-field select,
html[data-theme] .home-toggle {
    background: var(--theme-soft-bg);
}

html[data-theme="white"] .home-background-image,
html[data-theme="candy"] .home-background-image {
    opacity: 0.2;
}

html[data-theme="white"] .home-background::after,
html[data-theme="candy"] .home-background::after {
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.88) 0%, rgba(239, 246, 255, 0.72) 100%);
}