/* Atlobly Brand Colors - Custom Stylesheet */

:root {
    --atlobly-blue: #00a4ef;
    --atlobly-aqua: #00bcd4;
    --atlobly-bg: #f7f7f7;
    --atlobly-text: #4c5867;
}

/* Background Colors */
.bg-atlobly-blue { background-color: #00a4ef !important; }
.bg-atlobly-aqua { background-color: #00bcd4 !important; }
.bg-atlobly-bg { background-color: #f7f7f7 !important; }

/* Background with opacity */
.bg-atlobly-blue-10 { background-color: rgba(0, 164, 239, 0.1) !important; }
.bg-atlobly-blue-20 { background-color: rgba(0, 164, 239, 0.2) !important; }
.bg-atlobly-blue-30 { background-color: rgba(0, 164, 239, 0.3) !important; }
.bg-atlobly-aqua-10 { background-color: rgba(0, 188, 212, 0.1) !important; }
.bg-atlobly-aqua-20 { background-color: rgba(0, 188, 212, 0.2) !important; }

/* Text Colors */
.text-atlobly-blue { color: #00a4ef !important; }
.text-atlobly-aqua { color: #00bcd4 !important; }
.text-atlobly-text { color: #4c5867 !important; }

/* Text with opacity */
.text-atlobly-text-40 { color: rgba(76, 88, 103, 0.4) !important; }
.text-atlobly-text-60 { color: rgba(76, 88, 103, 0.6) !important; }
.text-atlobly-text-70 { color: rgba(76, 88, 103, 0.7) !important; }
.text-atlobly-text-80 { color: rgba(76, 88, 103, 0.8) !important; }

/* Border Colors */
.border-atlobly-blue { border-color: #00a4ef !important; }
.border-atlobly-aqua { border-color: #00bcd4 !important; }
.border-atlobly-blue-10 { border-color: rgba(0, 164, 239, 0.1) !important; }
.border-atlobly-blue-20 { border-color: rgba(0, 164, 239, 0.2) !important; }
.border-atlobly-blue-30 { border-color: rgba(0, 164, 239, 0.3) !important; }

/* Gradient Backgrounds */
.bg-gradient-atlobly {
    background: linear-gradient(135deg, #00a4ef 0%, #00bcd4 100%) !important;
}

.bg-gradient-atlobly-horizontal {
    background: linear-gradient(to right, #00a4ef 0%, #00bcd4 50%, #00a4ef 100%) !important;
}

/* Focus Ring */
.focus-ring-atlobly-aqua:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.2) !important;
}

.focus-ring-atlobly-blue:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0, 164, 239, 0.2) !important;
}