/* ------------------------------------------
   TYPOGRAPHY – scalable rem system
------------------------------------------ */
.text-xs {
    font-size: 0.75rem;
}

/* 12px */
.text-sm {
    font-size: 0.875rem;
}

/* 14px */
.text-base {
    font-size: 1rem;
}

/* 16px */
.text-lg {
    font-size: 1.125rem;
}

/* 18px */
.text-xl {
    font-size: 1.25rem;
}

/* 20px */
.text-2xl {
    font-size: 1.5rem;
}

/* 24px */
.text-3xl {
    font-size: 1.875rem;
}

/* 30px */
.text-4xl {
    font-size: 2.25rem;
}

/* 36px */
.text-5xl {
    font-size: 3rem;
}

/* 48px */
.text-6xl {
    font-size: 3.75rem;
}

/* 60px */
.text-7xl {
    font-size: 4.5rem;
}

/* 72px */
.text-8xl {
    font-size: 6rem;
}

/* 96px */

/* Font weights */
.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* Text colors */
.text-dark {
    color: #141414;
}

.text-white {
    color: #ffffff;
}

.text-muted {
    opacity: 0.7;
}

/* ------------------------------------------
   SPACING (margin & padding)
   scale: 0, 1, 2, 4, 6, 8, 10, 12, 16, 20, 24
------------------------------------------ */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-4 {
    margin: 1rem;
}

.m-6 {
    margin: 1.5rem;
}

.m-8 {
    margin: 2rem;
}

.m-10 {
    margin: 2.5rem;
}

.m-12 {
    margin: 3rem;
}

.mt-0,
.my-0 {
    margin-top: 0;
}

.mt-1,
.my-1 {
    margin-top: 0.25rem;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem;
}

.mt-4,
.my-4 {
    margin-top: 1rem;
}

.mt-6,
.my-6 {
    margin-top: 1.5rem;
}

.mt-8,
.my-8 {
    margin-top: 2rem;
}

.mb-0,
.my-0 {
    margin-bottom: 0;
}

.mb-1,
.my-1 {
    margin-bottom: 0.25rem;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem;
}

.mb-4,
.my-4 {
    margin-bottom: 1rem;
}

.mb-6,
.my-6 {
    margin-bottom: 1.5rem;
}

.mb-8,
.my-8 {
    margin-bottom: 2rem;
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.p-10 {
    padding: 2.5rem;
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}




/* ------------------------------------------
   BORDERS & RADIUS
------------------------------------------ */
.rounded-none {
    border-radius: 0;
}

.rounded-sm {
    border-radius: 0.125rem;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

.border {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.border-subtle {
    border: 1px solid rgba(200, 200, 200, 0.2);
}

.border-white-10 {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------
   OPACITY (light effects)
------------------------------------------ */
.opacity-100 {
    opacity: 1;
}

.opacity-95 {
    opacity: 0.95;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-0 {
    opacity: 0;
}

/* ------------------------------------------
   BACKGROUNDS & GRADIENTS
------------------------------------------ */
.bg-white {
    background-color: rgb(240, 240, 240);
}

.bg-transparent {
    background: rgba(0, 0, 0, 0);
}

.bg-glass {
    background: rgba(150, 150, 150, 0.2);
}

.bg-dark-overlay {
    background: rgba(0, 0, 0, 0.35);
    color: white;
}

.bg-light-gray {
    background-color: rgba(224, 224, 224, 0.06);
}

.bg-gray-100 {
    background-color: #f5f5f5;
}

.bg-gray-200 {
    background-color: #e5e5e5;
}

.bg-gradient {
    background: linear-gradient(0deg, rgba(237, 237, 237, 1) 0%, rgb(203, 221, 225) 100%);
}

/* ------------------------------------------
   COMPONENTS
------------------------------------------ */
/* Main window */
.main-window {
    border-radius: 13px;
    border: 1px solid rgba(100, 100, 100, 0.3);
}

/* Buttons */
.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-sm {
    font-size: 0.95rem;
    padding: 0.2rem 0.9rem;
}

.btn-md {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

.btn-lg {
    font-size: 1.125rem;
    padding: 0.75rem 1.5rem;
}

/* Cards */
.card-left-padding-sm {
    padding-left: 1.5rem;
}


.card {
    padding: 0.8rem 1rem;
    border-radius: 1rem;
}


.card-forecast-item {
    padding: 0 1.1rem;
    border-radius: 0.7rem;
}

.card-hourly {
    border-radius: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-top: 0.3rem;
}

.card-hourly-now {
    padding: 0.7rem 1.2rem;
    margin-top: 0;
    background-color: rgba(196, 196, 196, 0.15);
}

.card-info {
    background-color: #F6635C;
}

/* Bar container */
.bar-container {
    border-radius: 1rem;
    background-color: rgb(240, 240, 240);
}

/* Compact mode (used when window is small) */
.compact-window {
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.compact-temp {
    font-size: 5rem;
    font-weight: 800;
}

.compact-city {
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 0;
}

.compact-condition-icon {
    margin-right: 10px;
}

.compact-condition-text {
    font-size: 1rem;
    font-weight: 500;
}

.compact-detail-label {
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: 500;
}

.compact-detail-value {
    font-size: 0.9rem;
    font-weight: 600;
}

.compact-time-value {
    font-size: 0.9rem;
    margin-left: 10px;
    opacity: 0.8;
}

.compact-date {
    font-size: 1.2rem;
    opacity: 0.9;
}

.compact-raindrops {
    opacity: 0.4;
}

/* ------------------------------------------
   WEATHER DYNAMIC BACKGROUNDS (day & night)
   Prefix: .bg-weather-
------------------------------------------ */
.bg-weather-clear-sky {
    background-color: hsla(205, 60%, 35%, 1);
    background-image: radial-gradient(at 100% 5%, hsla(215, 43%, 77%, 0.51) 0px, transparent 50%),
        radial-gradient(at 43% 38%, hsla(206, 47%, 45%, 0.87) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(24, 1%, 83%, 0.69) 0px, transparent 50%),
        radial-gradient(at 43% 99%, hsla(214, 71%, 36%, 0.88) 0px, transparent 50%);
}

.bg-weather-few-clouds {
    background-color: hsla(210, 51%, 40%, 1);
    background-image: radial-gradient(at 46% 22%, hsla(201, 54%, 45%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(180, 17%, 72%, 1) 0px, transparent 50%),
        radial-gradient(at 28% 88%, hsla(0, 0%, 74%, 0.59) 0px, transparent 50%),
        radial-gradient(at 86% 78%, hsla(200, 19%, 59%, 1) 0px, transparent 50%);
}

.bg-weather-overcast,
.bg-weather-showers-scattered {
    background-color: hsla(210, 48%, 33%, 1);
    background-image: radial-gradient(at 72% 40%, hsla(216, 16%, 24%, 0.41) 0px, transparent 50%),
        radial-gradient(at 49% 30%, hsla(201, 51%, 43%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(195, 45%, 70%, 1) 0px, transparent 50%),
        radial-gradient(at 86% 78%, hsla(195, 14%, 46%, 1) 0px, transparent 50%);
}

.bg-weather-showers-large {
    background-color: hsla(205, 26%, 38%, 1);
    background-image: radial-gradient(at 3% 0%, hsla(240, 18%, 15%, 0.69) 0px, transparent 50%),
        radial-gradient(at 85% 68%, hsla(210, 34%, 20%, 0.96) 0px, transparent 50%),
        radial-gradient(at 89% 11%, hsla(213, 14%, 4%, 0.56) 0px, transparent 50%),
        radial-gradient(at 66% 100%, hsla(206, 42%, 14%, 1) 0px, transparent 50%),
        radial-gradient(at 19% 73%, hsla(214, 33%, 25%, 1) 0px, transparent 50%),
        radial-gradient(at 58% 0%, hsla(209, 95%, 82%, 0.75) 0px, transparent 50%),
        radial-gradient(at 55% 24%, hsla(195, 0%, 0%, 0.94) 0px, transparent 50%);
}

.bg-weather-storm {
    background-color: hsla(211, 21%, 35%, 1);
    background-image: radial-gradient(at 43% 37%, hsla(205, 22%, 9%, 0.76) 0px, transparent 50%),
        radial-gradient(at 38% 77%, hsla(203, 32%, 12%, 0.73) 0px, transparent 50%),
        radial-gradient(at 98% 88%, hsla(217, 15%, 9%, 0.9) 0px, transparent 50%),
        radial-gradient(at 67% 94%, hsla(217, 20%, 14%, 1) 0px, transparent 50%),
        radial-gradient(at 6% 89%, hsla(17, 3%, 53%, 1) 0px, transparent 50%),
        radial-gradient(at 99% 10%, hsla(189, 14%, 12%, 0.92) 0px, transparent 50%),
        radial-gradient(at 17% 4%, hsla(212, 19%, 14%, 1) 0px, transparent 50%),
        radial-gradient(at 66% 0%, hsla(213, 100%, 81%, 0.72) 0px, transparent 50%);
}

.bg-weather-snow {
    background: linear-gradient(171deg, rgba(32, 79, 156, 1) 11%, rgba(44, 91, 145, 1) 33%, rgba(105, 133, 154, 1) 63%, rgba(213, 215, 217, 1) 97%);
}

.bg-weather-fog {
    background: linear-gradient(0deg, rgba(53, 60, 59, 1) 3%, rgba(86, 92, 93, 1) 40%, rgba(138, 142, 153, 1) 73%, rgba(197, 202, 210, 1) 100%);
}

/* Night variants */
.bg-weather-clear-sky-night {
    background-color: hsla(235, 86%, 11%, 1);
    background-image: radial-gradient(at 0% 100%, hsla(32, 17%, 55%, 0.3) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(221, 14%, 33%, 0.83) 0px, transparent 50%),
        radial-gradient(at 82% 78%, hsla(217, 83%, 14%, 0.58) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(240, 92%, 10%, 1) 0px, transparent 50%);
}

.bg-weather-few-clouds-night {
    background-color: hsla(216, 26%, 22%, 1);
    background-image: radial-gradient(at 100% 0%, hsla(221, 56%, 12%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(223, 37%, 15%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 3%, hsla(223, 35%, 17%, 1) 0px, transparent 50%);
}

.bg-weather-overcast-night,
.bg-weather-showers-scattered-night {
    background-color: hsla(240, 13%, 28%, 1);
    background-image: radial-gradient(at 100% 99%, hsla(240, 21%, 6%, 1) 0px, transparent 50%),
        radial-gradient(at 99% 0%, hsla(240, 0%, 0%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(240, 19%, 9%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(240, 16%, 19%, 1) 0px, transparent 50%),
        radial-gradient(at 38% 0%, hsla(288, 13%, 80%, 0.21) 0px, transparent 50%);
}

.bg-weather-showers-large-night {
    background-color: hsla(206, 27%, 15%, 1);
    background-image: radial-gradient(at 100% 0%, hsla(217, 17%, 7%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(203, 41%, 17%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 3%, hsla(222, 33%, 9%, 1) 0px, transparent 50%);
}

.bg-weather-storm-night {
    background-color: hsla(245, 14%, 14%, 1);
    background-image: radial-gradient(at 100% 100%, hsla(175, 16%, 7%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(240, 21%, 6%, 1) 0px, transparent 50%),
        radial-gradient(at 56% 0%, hsla(217, 12%, 31%, 0.81) 0px, transparent 50%),
        radial-gradient(at 24% 0%, hsla(215, 9%, 5%, 1) 0px, transparent 50%),
        radial-gradient(at 1% 99%, hsla(40, 15%, 54%, 0.48) 0px, transparent 50%);
}

.bg-weather-snow-night {
    background: linear-gradient(180deg, rgba(20, 29, 52, 1) 0%, rgba(28, 44, 64, 1) 26%, rgba(28, 45, 73, 1) 52%, rgba(63, 66, 89, 1) 78%, rgba(96, 96, 96, 1) 100%);
}

.bg-weather-fog-night {
    background: linear-gradient(127deg, rgba(28, 27, 38, 1), rgba(50, 50, 50, 0) 100%),
        linear-gradient(217deg, rgba(50, 50, 50, 1), rgba(28, 27, 38, 1) 100%);
}

/* ------------------------------------------
   UTILITIES (misc)
------------------------------------------ */
.hide {
    opacity: 0.2;
}

.dynamic-bg {
    /* background-color: transparent; */
    color: white;
}

.app-body {
    padding: 20px;
}