@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #0b0f17;
    color: #e2e8f0;
}

.code-font {
    font-family: 'JetBrains Mono', monospace;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

.transparency-bg {
    background-image: linear-gradient(45deg, #1e293b 25%, transparent 25%), 
                      linear-gradient(-45deg, #1e293b 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #1e293b 75%), 
                      linear-gradient(-45deg, transparent 75%, #1e293b 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.toggle-checkbox:checked + .toggle-label { 
    background-color: #38bdf8; 
}

.toggle-label {
    width: 32px; 
    height: 18px; 
    background-color: #334155;
    border-radius: 999px; 
    position: relative; 
    cursor: pointer; 
    transition: background-color 0.2s;
}

.toggle-circle {
    width: 14px; 
    height: 14px; 
    background-color: white; 
    border-radius: 50%;
    position: absolute; 
    top: 2px; 
    left: 2px; 
    transition: transform 0.2s;
}

.toggle-checkbox:checked + .toggle-label .toggle-circle { 
    transform: translateX(14px); 
}