/* Background Colors */

.dark {
    --base-50: var(--slate-950);
    --base-100: var(--slate-900);
    --base-200: var(--slate-800);
    --base-300: var(--slate-700);
    --base-400: var(--slate-600);
    --base-500: var(--slate-500);
    --base-600: var(--slate-400);
    --base-700: var(--slate-300);
    --base-800: var(--slate-200);
    --base-900: var(--slate-100);
    --base-950: var(--slate-50);
    --brand-700: hsla(235, 100%, 83%, 1.000);
    --brand-600: hsla(235, 100%, 73%, 1.000);
    --brand-500: hsla(235, 100%, 63%, 1.000);
    --brand-400: hsla(235, 100%, 53%, 1.000);
    --brand-300: hsla(235, 100%, 43%, 1.000);
    --primary-400: hsla(317, 93%, 62%, 1.000);
    --primary-500: hsla(317, 93%, 62%, 1.000);
    --primary-600: hsla(317, 93%, 62%, 1.000);
    --action-secondary-400: ;
    --action-secondary-500: ;
    --action-secondary-600: ;
    --success-600: hsla(142, 70%, 55%, 1.000);
    --success-500: hsla(142, 70%, 45%, 1.000);
    --success-400: hsla(142, 70%, 35%, 1.000);
    --warning-600: hsla(46, 97%, 64%, 1.000);
    --warning-500: hsla(46, 97%, 54%, 1.000);
    --warning-400: hsla(46, 97%, 44%, 1.000);
    --danger-600: hsla(360, 84%, 70%, 1.000);
    --danger-500: hsla(360, 84%, 60%, 1.000);
    --danger-400: hsla(360, 84%, 50%, 1.000);
}

.light {
    --base-50: var(--slate-50);
    --base-100: var(--slate-100);
    --base-200: var(--slate-200);
    --base-300: var(--slate-300);
    --base-400: var(--slate-400);
    --base-500: var(--slate-500);
    --base-600: var(--slate-600);
    --base-700: var(--slate-700);
    --base-800: var(--slate-800);
    --base-900: var(--slate-900);
    --base-950: var(--slate-950);
    --brand-300: hsla(235, 100%, 83%, 1.000);
    --brand-400: hsla(235, 100%, 73%, 1.000);
    --brand-500: hsla(235, 100%, 63%, 1.000);
    --brand-600: hsla(235, 100%, 53%, 1.000);
    --brand-700: hsla(235, 100%, 43%, 1.000);
    --primary-400: hsla(317, 93%, 62%, 1.000);
    --primary-500: hsla(317, 93%, 62%, 1.000);
    --primary-600: hsla(317, 93%, 62%, 1.000);
    --action-secondary-400: ;
    --action-secondary-500: ;
    --action-secondary-600: ;
    --success-400: hsla(142, 70%, 55%, 1.000);
    --success-500: hsla(142, 70%, 45%, 1.000);
    --success-600: hsla(142, 70%, 35%, 1.000);
    --warning-400: hsla(46, 97%, 64%, 1.000);
    --warning-500: hsla(46, 97%, 54%, 1.000);
    --warning-600: hsla(46, 97%, 44%, 1.000);
    --danger-400: hsla(360, 84%, 70%, 1.000);
    --danger-500: hsla(360, 84%, 60%, 1.000);
    --danger-600: hsla(360, 84%, 50%, 1.000);
}

.bg-white {
    background-color: var(--white);
}

.bg-base-50 {
    background-color: var(--base-50);
}

.bg-base-100 {
    background-color: var(--base-100);
}

.bg-base-200 {
    background-color: var(--base-200);
}

.bg-base-300 {
    background-color: var(--base-300);
}

.bg-base-400 {
    background-color: var(--base-400);
}

.bg-base-500 {
    background-color: var(--base-500);
}

.bg-base-600 {
    background-color: var(--base-600);
}

.bg-base-700 {
    background-color: var(--base-700);
}

.bg-base-800 {
    background-color: var(--base-800);
}

.bg-base-900 {
    background-color: var(--base-900);
}

.bg-base-950 {
    background-color: var(--base-950);
}

.bg-black {
    background-color: var(--black);
}

.bg-brand-300 {
    background-color: var(--brand-300);
}

.bg-brand-400 {
    background-color: var(--brand-400);
}

.bg-brand,
.bg-brand-500 {
    background-color: var(--brand-500);
}

.bg-brand-600 {
    background-color: var(--brand-600);
}

.bg-brand-700 {
    background-color: var(--brand-700);
}

.bg-brand-gradient {
    background: rgb(169,176,255);
    background: linear-gradient(90deg, var(--brand-300) 0%, var(--brand-400) 25%, var(--brand-500) 50%, var(--brand-600) 75%, var(--brand-700) 100%);
}

.bg-primary-400 {
    background-color: var(--primary-400);
}

.bg-primary,
.bg-primary-500 {
    background-color: var(--primary-500);
}

.bg-primary-600 {
    background-color: var(--primary-600);
}

.bg-secondary-400 {
    background-color: var(--secondary-400);
}

.bg-secondary,
.bg-secondary-500 {
    background-color: var(--secondary-500);
}

.bg-secondary-600 {
    background-color: var(--secondary-600);
}

.bg-tertiary-400 {
    background-color: var(--tertiary-400);
}

.bg-tertiary,
.bg-tertiary-500 {
    background-color: var(--tertiary-500);
}

.bg-tertiary-600 {
    background-color: var(--tertiary-600);
}

.bg-success-400 {
    background-color: var(--success-400);
}

.bg-success,
.bg-success-500 {
    background-color: var(--success-500);
}

.bg-success-600 {
    background-color: var(--success-600);
}

.bg-warning-400 {
    background-color: var(--warning-400);
}

.bg-warning,
.bg-warning-500 {
    background-color: var(--warning-500);
}

.bg-warning-600 {
    background-color: var(--warning-600);
}

.bg-danger-400 {
    background-color: var(--danger-400);
}

.bg-danger,
.bg-danger-500 {
    background-color: var(--danger-500);
}

.bg-danger-600 {
    background-color: var(--danger-600);
}

/* Text Colors */

.text-base-50 {
    color: var(--base-50);
}

.text-base-100 {
    color: var(--base-100);
}

.text-base-200 {
    color: var(--base-200);
}

.text-base-300 {
    color: var(--base-300);
}

.text-base-400 {
    color: var(--base-400);
}

.text-base-500 {
    color: var(--base-500);
}

.text-base-600 {
    color: var(--base-600);
}

.text-base-700 {
    color: var(--base-700);
}

.text-base-800 {
    color: var(--base-800);
}

.text-base-900 {
    color: var(--base-900);
}

.text-base-950 {
    color: var(--base-950);
}

/* Text Transforms */

.uppercase {
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}

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

.no-underline {
    text-decoration: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* Borders */

.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-dotted	{
    border-style: dotted;
}

.border-double {
    border-style: double;
}

.border-hidden {
    border-style: hidden;
}

.border-none {
    border-style: none;
}

.border-black {
    border: 1px solid var(--black);
}

/* Border Radii */

.border-rad-0 {
    border-radius: var(--radius-0);
}

.border-rad-xs {
    border-radius: var(--radius-xs);
}

.border-rad-sm {
    border-radius: var(--radius-sm);
}

.border-rad-md {
    border-radius: var(--radius-md);
}

.border-rad-lg {
    border-radius: var(--radius-lg);
}

.border-rad-xl {
    border-radius: var(--radius-xl);
}

.border-rad-2x {
    border-radius: var(--radius-xxl);
}

/* Width */

.w-full {
    width: 100%;
}

/* Max-Width */

.max-w-12 {
    max-width: var(--max-width-12); /* 1440px */
}
  
.max-w-11 {
    max-width: var(--max-width-11); /* 1320px */
}

.max-w-10 {
    max-width: var(--max-width-10) /* 1200px */
}

.max-w-9 {
    max-width: var(--max-width-9); /* 1080px */
}

.max-w-8 {
    max-width: var(--max-width-8); /* 960px */
}

.max-w-7 {
    max-width: var(--max-width-7); /* 840px */
}

.max-w-6 {
    max-width: var(--max-width-6); /* 720px */
}

.max-w-5 {
    max-width: var(--max-width-5); /* 640px */
}

.max-w-4 {
    max-width: var(--max-width-4); /* 480px */
}

.max-w-3 {
    max-width: var(--max-width-3); /* 360px */
}

.max-w-2 {
    max-width: var(--max-width-2); /* 240px */
}

.max-w-1 {
    max-width: var(--max-width-1); /* 120px */
}

.max-w-full {
    max-width: 100%;
}

/* Margins */

.m-auto {
    margin: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mx-xs {
    margin-left: var(--spacing-h-xs);
    margin-right: var(--spacing-h-xs);
}

.mx-sm {
    margin-left: var(--spacing-h-sm);
    margin-right: var(--spacing-h-sm);
}

.mx-md {
    margin-left: var(--spacing-h-md);
    margin-right: var(--spacing-h-md);
}

.mx-lg {
    margin-left: var(--spacing-h-lg);
    margin-right: var(--spacing-h-lg);
}

.mx-xl {
    margin-left: var(--spacing-h-xl);
    margin-right: var(--spacing-h-xl);
}

.mx-xxl {
    margin-left: var(--spacing-h-xxl);
    margin-right: var(--spacing-h-xxl);
}

.my-xs {
    margin-top: var(--spacing-v-xs);
    margin-bottom: var(--spacing-v-xs);
}

.my-sm {
    margin-top: var(--spacing-v-sm);
    margin-bottom: var(--spacing-v-sm);
}

.my-md {
    margin-top: var(--spacing-v-md);
    margin-bottom: var(--spacing-v-md);
}

.my-lg {
    margin-top: var(--spacing-v-lg);
    margin-bottom: var(--spacing-v-lg);
}

.my-xl {
    margin-top: var(--spacing-v-xl);
    margin-bottom: var(--spacing-v-xl);
}

.my-xxl {
    margin-top: var(--spacing-v-xxl);
    margin-bottom: var(--spacing-v-xxl);
}

/* Padding */

.p-xs {
    padding: var(--spacing-xs);
}

.p-sm {
    padding: var(--spacing-sm);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.p-xl {
    padding: var(--spacing-xl);
}

.p-xxl {
    padding: var(--spacing-xxl);
}

.py-xs {
    padding-top: var(--spacing-v-xs);
    padding-bottom: var(--spacing-v-xs);
}

.py-sm {
    padding-top: var(--spacing-v-sm);
    padding-bottom: var(--spacing-v-sm);
}

.py-md {
    padding-top: var(--spacing-v-md);
    padding-bottom: var(--spacing-v-md);
}

.py-lg {
    padding-top: var(--spacing-v-lg);
    padding-bottom: var(--spacing-v-lg);
}

.py-xl {
    padding-top: var(--spacing-v-xl);
    padding-bottom: var(--spacing-v-xl);
}

.py-xxl {
    padding-top: var(--spacing-v-xxl);
    padding-bottom: var(--spacing-v-xxl);
}

.px-xs {
    padding-left: var(--spacing-h-xs);
    padding-right: var(--spacing-h-xs);
}

.px-sm {
    padding-left: var(--spacing-h-sm);
    padding-right: var(--spacing-h-sm);
}

.px-md {
    padding-left: var(--spacing-h-md);
    padding-right: var(--spacing-h-md);
}

.px-lg {
    padding-left: var(--spacing-h-lg);
    padding-right: var(--spacing-h-lg);
}

.px-xl {
    padding-left: var(--spacing-h-xl);
    padding-right: var(--spacing-h-xl);
}

.px-xxl {
    padding-left: var(--spacing-h-xxl);
    padding-right: var(--spacing-h-xxl);
}

/* Display */

.block	{
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline	{
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.justify-center {
    justify-content: center;
}

.self-center {
    align-self: center;
}

.self-start {
    align-self: flex-start;
}

/* Grid Columns */

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.col-span-1	{
    grid-column: span 1 / span 1;
}

.col-span-2	{
    grid-column: span 2 / span 2;
}

.col-span-3	{
    grid-column: span 3 / span 3;
}

.col-span-4	{
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-span-8	{
    grid-column: span 8 / span 8;
}

.col-span-9 {
    grid-column: span 9 / span 9;
}

.col-span-10 {
    grid-column: span 10 / span 10;
}

.col-span-11 {
    grid-column: span 11 / span 11;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.gap-1 {
    gap: .25rem;
}

.gap-2 {
    gap: .5rem;
}

.gap-3 {
    gap: .75rem;
}

.gap-4 {
    gap: 1rem;
}

/* Aspect Ratio */

.square {
    aspect-ratio: 1/1;
}

.widescreen {
    aspect-ratio: 16/9;
}

.cinemascope {
    aspect-ratio: 2.35/1;
}

/* Shadows */

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.shadow-none {
    box-shadow: 0 0 #0000;
}

/* Breakpoints */

@media screen and (min-width: 90rem) {
    /* XL Desktop > 1440px */  
  }
  
  @media screen and (max-width: 90rem) {
    /* LG Laptop < 1440px */  
  }
  
  @media screen and (max-width: 60rem) {
    /* MD Tablet < 960px */  

    .hidden-md {
        display: none;
    }

    .grid-cols-md-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    
    .grid-cols-md-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }
    
    .grid-cols-md-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    
    .grid-cols-md-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
    
    .grid-cols-md-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    
    .grid-cols-md-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    
    .grid-cols-md-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    
    .grid-cols-md-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    
    .grid-cols-md-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .grid-cols-md-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .grid-cols-md-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid-cols-md-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

  }
  
  @media screen and (max-width: 30rem) {
    /* SM Mobile < 480px */  

    .hidden-sm {
        display: none;
    }

    .grid-cols-sm-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    
    .grid-cols-sm-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }
    
    .grid-cols-sm-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    
    .grid-cols-sm-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
    
    .grid-cols-sm-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    
    .grid-cols-sm-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    
    .grid-cols-sm-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    
    .grid-cols-sm-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    
    .grid-cols-sm-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .grid-cols-sm-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .grid-cols-sm-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid-cols-sm-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

  }