.btn {
    padding: 10px 22px;
    background: var(--accent-color);
    color: color-mix(in srgb, var(--bg-primary) 90%, white);
    border: 2px solid transparent;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    margin: 10px;
    transition: all 0.3s ease;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    min-width: 180px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.btn:hover {
    background: color-mix(in srgb, var(--bg-primary) 90%, white);
    color: var(--accent-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--accent-color-dark);
    border-radius: 25px;
}

.btn-standard-semi-rounded {
    padding: 10px 22px;
    background: var(--accent-color);
    color: color-mix(in srgb, var(--bg-primary) 90%, white);
    border: 2px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin: 10px;
    transition: all 0.3s ease;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    min-width: 180px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.btn-standard-semi-rounded:hover {
    background: color-mix(in srgb, var(--bg-primary) 90%, white);
    color: var(--accent-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--accent-color-dark);
    border-radius: 8px;
}

.btn-outline {
    background: color-mix(in srgb, var(--bg-primary) 90%, white);
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--accent-color);
    color: color-mix(in srgb, var(--bg-primary) 90%, white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 2px solid transparent;
}

.btn-outline-rounded {
    background: color-mix(in srgb, var(--bg-primary) 90%, white);
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    border-radius: 25px;
    box-shadow: none;
}

.btn-outline-rounded:hover {
    background: var(--accent-color);
    color: color-mix(in srgb, var(--bg-primary) 90%, white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    border: 2px solid transparent;
}

.btn-text {
    background: transparent;
    color: var(--accent-color);
    border: none;
    box-shadow: none;
    padding: 10px 15px;
    min-width: auto;
    text-decoration: underline;
}

.btn-text:hover {
    background: transparent;
    color: var(--accent-color-dark);
    transform: none;
    box-shadow: none;
    text-decoration: underline;
    border: none;
}

.theme-twilight {
    --bg-primary: #f2f1f6;
    --bg-secondary: #d0d0e0;
    --accent-color: #6f7ca3;
    --accent-color-dark: #5e6b8c;
    --text-color: #342f40;
}

.theme-sunset {
    --bg-primary: #fff6f2;
    --bg-secondary: #ffd5c8;
    --accent-color: #e0856a;
    --accent-color-dark: #c97457;
    --text-color: #403834;
}

.theme-ocean {
    --bg-primary: #f2f8fb;
    --bg-secondary: #c8e6f0;
    --accent-color: #4a97b8;
    --accent-color-dark: #3c829e;
    --text-color: #1a3542;
}

.theme-dark {
    --bg-primary: #2a2a2a;
    --bg-secondary: #3d3d3d;
    --accent-color: #8fbfa3;
    --accent-color-dark: #7caa8f;
    --text-color: #f0f0f0;
}

.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f0f0f5;
    --accent-color: #4a86e8;
    --accent-color-dark: #3a76d8;
    --text-color: #333333;
}

.theme-mint {
    --bg-primary: #f4fbf8;
    --bg-secondary: #d7ede3;
    --accent-color: #5bc8a0;
    --accent-color-dark: #42b48c;
    --text-color: #2a3e37;
}

.theme-desert {
    --bg-primary: #fbf8f4;
    --bg-secondary: #f2e4d4;
    --accent-color: #d1a778;
    --accent-color-dark: #be9264;
    --text-color: #4e3d2a;
}

.theme-nordic {
    --bg-primary: #f5f7fa;
    --bg-secondary: #dfe5ed;
    --accent-color: #688fad;
    --accent-color-dark: #577a97;
    --text-color: #2c3e50;
}

.theme-autumn {
    --bg-primary: #faf7f4;
    --bg-secondary: #f3e8df;
    --accent-color: #d17f52;
    --accent-color-dark: #ba6c41;
    --text-color: #463126;
}

.theme-emerald {
    --bg-primary: #f5faf7;
    --bg-secondary: #d9ede5;
    --accent-color: #27ae7e;
    --accent-color-dark: #1e9b6f;
    --text-color: #1a3c30;
}

.theme-ruby {
    --bg-primary: #fdf5f5;
    --bg-secondary: #f7e0e0;
    --accent-color: #d54c4c;
    --accent-color-dark: #c13e3e;
    --text-color: #471a1a;
}

.theme-midnight {
    --bg-primary: #1f2937;
    --bg-secondary: #2d3748;
    --accent-color: #7c92c3;
    --accent-color-dark: #6b7fb0;
    --text-color: #e2e8f0;
}

.theme-bamboo {
    --bg-primary: #f8faf4;
    --bg-secondary: #ebf0df;
    --accent-color: #8aab6a;
    --accent-color-dark: #769656;
    --text-color: #40472f;
}

.theme-coral {
    --bg-primary: #fff7f5;
    --bg-secondary: #ffe0da;
    --accent-color: #ff7e67;
    --accent-color-dark: #f06c55;
    --text-color: #4d2c25;
}

.theme-slate {
    --bg-primary: #f7f9fa;
    --bg-secondary: #e3e8ed;
    --accent-color: #546e7a;
    --accent-color-dark: #455a64;
    --text-color: #263238;
}

.theme-coffee {
    --bg-primary: #faf7f5;
    --bg-secondary: #ebe3dd;
    --accent-color: #a17a5c;
    --accent-color-dark: #8c674c;
    --text-color: #3e2e23;
}

.theme-glacier {
    --bg-primary: #f5fafc;
    --bg-secondary: #e1eef4;
    --accent-color: #6fb5cf;
    --accent-color-dark: #5da6c0;
    --text-color: #1c3f4a;
}

.theme-amethyst {
    --bg-primary: #f8f5fb;
    --bg-secondary: #e8dff0;
    --accent-color: #9b69c9;
    --accent-color-dark: #8655b4;
    --text-color: #3a2954;
}

.theme-cherry {
    --bg-primary: #fdf6f8;
    --bg-secondary: #f7e0e7;
    --accent-color: #e05c85;
    --accent-color-dark: #cc4d74;
    --text-color: #4a1a2a;
}

.theme-forest {
    --bg-primary: #f5f9f6;
    --bg-secondary: #dfeae2;
    --accent-color: #4b7d5b;
    --accent-color-dark: #3e694c;
    --text-color: #192e20;
}

.theme-obsidian {
    --bg-primary: #1e1e2e;
    --bg-secondary: #2a2a3c;
    --accent-color: #a288d9;
    --accent-color-dark: #8b73c0;
    --text-color: #e2e0ec;
}

.theme-abyss {
    --bg-primary: #151c28;
    --bg-secondary: #1e2738;
    --accent-color: #5ccfe6;
    --accent-color-dark: #49bbd2;
    --text-color: #e6edf3;
}

.theme-nightfall {
    --bg-primary: #232334;
    --bg-secondary: #2d2d44;
    --accent-color: #ffb86c;
    --accent-color-dark: #f0a85a;
    --text-color: #eae9f2;
}

.theme-shadow {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --accent-color: #50fa7b;
    --accent-color-dark: #3de466;
    --text-color: #f8f8f2;
}

.theme-volcanic {
    --bg-primary: #1c1212;
    --bg-secondary: #2d1c1c;
    --accent-color: #ff5e5e;
    --accent-color-dark: #e54b4b;
    --text-color: #f8e9e9;
}

.theme-eclipse {
    --bg-primary: #1a1025;
    --bg-secondary: #281a35;
    --accent-color: #ffd700;
    --accent-color-dark: #ebc700;
    --text-color: #ece8f3;
}

.theme-onyx {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1d1d1d;
    --accent-color: #c0c0c0;
    --accent-color-dark: #a9a9a9;
    --text-color: #f5f5f5;
}

.theme-forestnight {
    --bg-primary: #1c2521;
    --bg-secondary: #2a382f;
    --accent-color: #d8a878;
    --accent-color-dark: #c49665;
    --text-color: #e6ede8;
}

.theme-carbon {
    --bg-primary: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --accent-color: #4d9de0;
    --accent-color-dark: #3c87c8;
    --text-color: #e0e0e0;
}

.theme-midnightberry {
    --bg-primary: #231c2d;
    --bg-secondary: #32283e;
    --accent-color: #ff6b97;
    --accent-color-dark: #e85884;
    --text-color: #f0e8f5;
}