/* =================================================================
   Color System - AuraMedi
   ================================================================= */

/* =================================================================
   CSS Variables
   ================================================================= */
:root {
    /* Primary Colors */
    --sky: #4B91F7;
    --sky-dark: #3e6cbd;
    --bg-sky: #a7d2ff26;

    --pink: #FF69B4;
    --pink-dark: #b93a79;
    --bg-pink: rgba(240, 136, 251, .15);

    --purple: #7631f6;
    --purple-dark: #421c8a;
    --bg-purple: rgba(202, 162, 251, 0.15);

    --blue: #3182f6;
    --blue-dark: #1f529b;
    --bg-blue: #64a8ff26;

    --red: #f04452;
    --red-dark: #89232b;
    --bg-red: #fb889026;

    --green: #11a05d;
    --green-dark: #0b693d;
    --bg-green: #e7faf1;

    --yellow: #ffc71f;
    --yellow-dark: #907012;
    --bg-yellow: rgba(251, 224, 136, .15);

    --orange: #ff5c00;
    --orange-dark: #9b5c29;
    --bg-orange: rgba(251, 182, 136, .15);

    --grey: #44546f;
    --grey-dark: #403d3d;
    --bg-grey: #0220470d;
}

/* =================================================================
   Utility Classes
   ================================================================= */
.none-dec {
    text-decoration: none;
}

/* =================================================================
   Text Colors
   ================================================================= */
.sky { color: #0f90ff; }
.purple { color: #4541FF !important; }
.blue { color: #496bf3 !important; }
.pink { color: #e74492; }
.gray { color: #666; }
.sub { color: #626f86 !important; }
.subtle { color: rgba(9, 30, 66, .31) !important; }
.naver { color: #03c75b !important; }
.instagram { color: #ee539e !important; }

/* Using CSS Variables */
.text-sky { color: var(--sky) !important; }
.text-pink { color: var(--pink) !important; }
.text-purple { color: var(--purple) !important; }
.text-blue { color: var(--blue) !important; }
.text-red { color: var(--red) !important; }
.text-green { color: var(--green) !important; }
.text-yellow { color: var(--yellow) !important; }
.text-orange { color: var(--orange) !important; }
.text-grey { color: var(--grey) !important; }

/* =================================================================
   Background Colors
   ================================================================= */
.bg-sky { background-color: var(--bg-sky) !important; }
.bg-pink { background-color: var(--bg-pink) !important; }
.bg-purple { background-color: var(--bg-purple) !important; }
.bg-blue { background-color: var(--bg-blue) !important; }
.bg-red { background-color: var(--bg-red) !important; }
.bg-green { background-color: var(--bg-green) !important; }
.bg-yellow { background-color: var(--bg-yellow) !important; }
.bg-orange { background-color: var(--bg-orange) !important; }
.bg-grey { background-color: var(--bg-grey) !important; }
.bg-black { background-color: #101010 !important; }
.bg-naver { background-color: #03c75b !important; }
.bg-toss { background-color: #0064FF !important; }
.bg-instagram { background-color: #ee539e !important; }

/* Gradient Backgrounds */
.bg-sky-grad { background: linear-gradient(180deg, var(--sky) 0%, var(--sky-dark) 100%); }
.bg-pink-grad { background: linear-gradient(180deg, var(--pink) 0%, var(--pink-dark) 100%); }
.bg-purple-grad { background: linear-gradient(180deg, var(--purple) 0%, var(--purple-dark) 100%); }
.bg-blue-grad { background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%); }
.bg-red-grad { background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%); }
.bg-green-grad { background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%); }
.bg-yellow-grad { background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-dark) 100%); }
.bg-orange-grad { background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%); }
.bg-grey-grad { background: linear-gradient(180deg, var(--grey) 0%, var(--grey-dark) 100%); }

/* =================================================================
   Border Colors
   ================================================================= */
.border-sky { border-color: var(--sky) !important; }
.border-pink { border-color: var(--pink) !important; }
.border-purple { border-color: var(--purple) !important; }
.border-blue { border-color: var(--blue) !important; }
.border-red { border-color: var(--red) !important; }
.border-green { border-color: var(--green) !important; }
.border-yellow { border-color: var(--yellow) !important; }
.border-orange { border-color: var(--orange) !important; }
.border-grey { border-color: var(--grey) !important; }

/* =================================================================
   Button System (using CSS Variables)
   ================================================================= */

/* Base Button Styles */
.btn[class*="-subtle"],
.btn[class*="btn-"] {
    font-family: 'Pretendard-SemiBold', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    padding: 0.35rem 0.5rem;
    border-radius: 0.55rem;
    white-space: nowrap !important;
    transition: background-color 0.2s ease;
}

span.btn {
    cursor: default;
    padding: 0 8px !important;
    pointer-events: none;
    box-shadow: none !important;
}

span.btn:is(:hover, :focus) {
    background-color: inherit !important;
    color: inherit !important;
}

/* Solid Buttons */
.btn-sky { background-color: var(--sky) !important; color: #fff !important; border: 1px solid var(--sky); }
.btn-sky:hover { background-color: var(--sky-dark); border-color: var(--sky-dark); }

.btn-pink { background-color: var(--pink) !important; color: #fff !important; border: 1px solid var(--pink); }
.btn-pink:hover { background-color: var(--pink-dark); border-color: var(--pink-dark); }

.btn-purple { background-color: var(--purple) !important; color: #fff !important; border: 1px solid var(--purple); }
.btn-purple:hover { filter: brightness(.85); }

.btn-blue { background-color: var(--blue) !important; color: #fff !important; border: 1px solid var(--blue); }
.btn-blue:hover { filter: brightness(.85); }

.btn-red { background-color: var(--red) !important; color: #fff !important; border: 1px solid var(--red); }
.btn-red:hover { filter: brightness(.85); }

.btn-green { background-color: var(--green) !important; color: #fff !important; border: 1px solid var(--green); }
.btn-green:hover { filter: brightness(.85); }

.btn-yellow { background-color: var(--yellow) !important; color: #212529 !important; border: 1px solid var(--yellow); }
.btn-yellow:hover { filter: brightness(.85); }

.btn-orange { background-color: var(--orange) !important; color: #fff !important; border: 1px solid var(--orange); }
.btn-orange:hover { filter: brightness(.85); }

.btn-grey { background-color: var(--grey) !important; color: #fff !important; border: 1px solid var(--grey); }
.btn-grey:hover { filter: brightness(.85); }

/* Subtle Buttons (soft background + colored text) */
.btn-sky-subtle { background-color: var(--bg-sky) !important; color: var(--sky) !important; border: 1px solid transparent; }
.btn-sky-subtle:hover { filter: brightness(.85); }

.btn-pink-subtle { background-color: var(--bg-pink) !important; color: var(--pink) !important; border: 1px solid transparent; }
.btn-pink-subtle:hover { filter: brightness(.85); }

.btn-purple-subtle { background-color: var(--bg-purple) !important; color: var(--purple) !important; border: 1px solid transparent; }
.btn-purple-subtle:hover { filter: brightness(.85); }

.btn-blue-subtle { background-color: var(--bg-blue) !important; color: var(--blue) !important; border: 1px solid transparent; }
.btn-blue-subtle:hover { filter: brightness(.85); }

.btn-red-subtle { background-color: var(--bg-red) !important; color: var(--red) !important; border: 1px solid transparent; }
.btn-red-subtle:hover { filter: brightness(.85); }

.btn-green-subtle { background-color: var(--bg-green) !important; color: var(--green) !important; border: 1px solid transparent; }
.btn-green-subtle:hover { filter: brightness(.85); }

.btn-yellow-subtle { background-color: var(--bg-yellow) !important; color: var(--yellow) !important; border: 1px solid transparent; }
.btn-yellow-subtle:hover { filter: brightness(.85); }

.btn-orange-subtle { background-color: var(--bg-orange) !important; color: var(--orange) !important; border: 1px solid transparent; }
.btn-orange-subtle:hover { filter: brightness(.85); }

.btn-grey-subtle { background-color: var(--bg-grey) !important; color: var(--grey) !important; border: 1px solid transparent; }
.btn-grey-subtle:hover { filter: brightness(.85); }