/*
              _                             _               _     __   __
         /\  | |                           | |             (_)    \ \ / /
        /  \ | |_ _ __ ___   ___  ___ _ __ | |__   ___ _ __ _  ___ \ V / 
       / /\ \| __| '_ ` _ \ / _ \/ __| '_ \| '_ \ / _ \ '__| |/ __| > <  
      / ____ \ |_| | | | | | (_) \__ \ |_) | | | |  __/ |  | | (__ / . \ 
     /_/    \_\__|_| |_| |_|\___/|___/ .__/|_| |_|\___|_|  |_|\___/_/ \_\
                                     | |                            
                                     |_|                                                                                                                

    Created with ♥ by the AtmosphericX Team (KiyoWx, StarflightWx, Everwatch1, & CJ Ziegler)
    Discord: https://atmosphericx-discord.scriptkitty.cafe
    Ko-Fi: https://ko-fi.com/k3yomi
    Documentation: http://localhost/documentation | https://atmosphericx.scriptkitty.cafe/documentation

*/

/* ---------------- PRIMARY ELEMENT UTILITIES ---------------- */
.input-primary { width: 100%; padding: 12px 16px; border: 1.5px solid var(--clr-surface-a20); background: var(--clr-surface-a10-t60); color: var(--clr-light-a0); font-size: 12px; outline: none; transition: all 0.5s ease; }
.a-primary { text-decoration: none; font-size: 12px; padding: 6px 10px; transition: all 0.5s ease; }
.text-primary { width: 100%; transition: all 0.5s ease; }
.div-primary { width: 100%; border-radius: 16px; background: var(--clr-surface-a0-t80); padding: 40px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); border: 1px solid var(--clr-surface-a20); transition: all 0.5s ease; }
.btn-primary { width: 100%; padding: 12px 12px; border: none; border-radius: 12px; background: var(--clr-info-a0-t50); color: var(--clr-light-a0); cursor: pointer; transition: all 0.5s ease; }


/* ---------------- BACKGROUND COLOR UTILITIES ---------------- */
.bg-danger { background: var(--clr-danger-a0-t40) !important; }
.bg-success { background: var(--clr-success-a0-t60) !important; }
.bg-warning { background: var(--clr-warning-a0-t50) !important; }
.bg-neutral { background: var(--clr-neutral-a0-t60) !important; }
.bg-generic { background: var(--clr-surface-tonal-a0) !important; }
.bg-info { background: var(--clr-info-a0-t50) !important; }

/* ---------------- TEXT COLOR UTILITIES ---------------- */
.text-danger { color: var(--clr-danger-a0) !important; }
.text-success { color: var(--clr-success-a0) !important; }
.text-warning { color: var(--clr-warning-a0) !important; }
.text-neutral { color: var(--clr-neutral-a10) !important; }
.text-info { color: var(--clr-info-a0) !important; }


/* ---------------- ELEMENT RADIUS UTILITIES ---------------- */
.radius-5 { border-radius: 5px !important; }
.radius-10 { border-radius: 10px !important; }
.radius-50 { border-radius: 50px !important; }
.radius-100 { border-radius: 100px !important; }
.glassy { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: transparent;}


/* ---------------- INTERACTION UTILITIES ---------------- */
.hover { transition: all 0.5s ease-in-out; } .hover:hover { transform: translateY(-3px); }
.hover-light { transition: all 0.5s ease-in-out; filter: brightness(1) } .hover-light:hover { filter: brightness(2); }
.hover-pointer { cursor: pointer; }

/* ---------------- GRID SPAN UTILITIES ---------------- */
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.row-1 { grid-row: span 1; }
.row-2 { grid-row: span 2; }
.row-3 { grid-row: span 3; }
.row-4 { grid-row: span 4; }