:root {
    --color-primary: #1E3557;
    --color-secondary: #2F8C8F;
    --color-accent: #D4A64A;
    --color-bg-light: #F5F7F8;
    --color-bg-white: #FFFFFF;
    --color-text-primary: #2B2B2B;
    --color-text-secondary: #6B7C86;
    --color-border: #E0E6ED;
    --color-shadow: rgba(30, 53, 87, 0.1);
    --gradient-primary: linear-gradient(135deg, #2F8C8F, #1E3557);
}

body {
    background: linear-gradient(135deg, #2F8C8F, #1E3557);
    min-height: 100vh;
    font-family: 'Inter', system-ui, sans-serif;
}

.img-size{
    width: 75px;
}

.text-icon {
    color: var(--color-secondary);
}

.brand-name {
    color: var(--color-primary);
}

.card {
    background: var(--color-bg-white);
    border-radius: 1rem;
    box-shadow: 0 4px 6px var(--color-shadow);
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #162944;
    transform: translateY(-2px);
}

label {
    color: var(--color-text-primary);
}

input{
    border-color: var(--color-border);
}

input[type='checkbox']{
    accent-color: var(--color-secondary);
}