@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Default for DESKTOP - 1920px */
:root {
    /*
    ========================
        COLOR VARIABLES
    =========================
    */

    /* Primary Color */
    --color-primary: #016BFF; /* blue-ribbon, ElectricBlue */
    --color-primary-alt: #0057D0; /* dark-blue */

    /* Secondary Colors */
    --color-secondary: #0E1118; /* bunker, MidnightNavyColor */
    --color-secondary-alt: #EAF1FF; /* alice, TitleWhite */

    /* Accent Colors */
    --color-accent: #22293A; /* midnight, MidnightBlue */
    --color-accent-alt: #C1D4FA; /* icy-plains */

    /* Support Colors */
    --color-support: #4A4D56; /* quartz, charcoalGray */
    --color-support-alt: #B6BED7; /* steel-blue, LavenderBlue */

    /* Background Colors */
    --color-background-dark: #000000; /* black */
    --color-background-light: #FFFFFF; /* white */

    /* Hover Background Color for Select Items */
    --color-hover-background: #383C46;
    --color-hover-action: rgba(1, 107, 255, 0.20); /* 0.20 not 0.30 like --color-action */

    /* Text Color */
    --color-text: #909090; /* gray, DarkGray */

    /* Action Color */
    --color-action: rgba(1, 107, 255, 0.30); /* secondary-button */

    /* Warning Color */
    --color-warning: #B50000; /* red-warriors, AlertRed */

    /* Additional Colors */
    --color-deep-sapphire-blue: #0A2852; /* DeepSapphireBlue */
    --color-golden-yellow: #FFCA1B; /* GoldenYellow */
    --color-navy-blue: #0A2C5D; /* NavyBlue */

    /* Status Colors */

    /* SOLD */
    --color-sold: #1BC5BD; /* tiffany-blue */
    --background-sold: rgba(27, 197, 189, 0.20);

    /* UNDER REVIEW */
    --color-under-review: #FFA800; /* chrome-yellow */
    --background-under-review: rgba(255, 168, 0, 0.20);

    --background-under-review-dark: #393320; /* dark-yellow */
    --background-under-review-light: #FFF4DE; /* light-yellow */

    /* APPROVED ARTWORK */
    --color-approved: #3699FF; /* brilliant-azure */
    --background-approved: rgba(54, 153, 255, 0.20);

    --background-approved-dark: #0C1F3B; /* dark-blue */
    --background-approved-light: #C8E3FF; /* light-blue */

    /* DRAFT */
    --color-draft: #8950FC; /* lavender-indigo */
    --background-draft: rgba(137, 80, 252, 0.20);

    /* REJECTED */
    --color-rejected: #F64E60; /* magic-potion */
    --background-rejected: rgba(246, 78, 96, 0.20);

    --background-rejected-dark: #3A2434; /* dark-magic-potion */
    --background-rejected-light: #FFE2E5; /* light-magic-potion */

    /* UNAVAILABLE */
    --color-unavailable: #FF6B01; /* blaze-orange */
    --background-unavailable: rgba(255, 107, 1, 0.20);

    --background-unavailable-dark: #312014; /* dark-blaze-orange */
    --background-unavailable-light: #FFD3B3; /* light-blaze-orange */

    /* General Colors */
    --color-black: #000000;
    --color-white: #FFFFFF;

    --background-transparent: 'transparent';

    /*========================
        TYPOGRAPHY VARIABLES
    =========================*/

    /* Font Families */
    --font-family-base: 'Barlow Semi Condensed', sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Sizes for Headings */
    --font-size-h-56: 56px; /* H-56 */
    --font-size-h-48: 48px; /* H-48 */
    --font-size-h-42: 42px; /* H-42 */
    --font-size-h-38: 38px; /* H-38 */
    --font-size-h-34: 34px; /* H-34 */
    --font-size-h-32: 32px; /* H-32 */
    --font-size-h-28: 28px; /* H-28 */
    --font-size-h-26: 26px; /* H-26 */
    --font-size-h-24: 24px; /* H-24 */
    --font-size-h-22: 22px; /* H-22 */
    --font-size-h-20: 20px; /* H-20 */
    --font-size-h-18: 18px; /* H-18 */
    --font-size-h-16: 16px; /* H-16-S and H-16-R */
    --font-size-h-14: 14px; /* H-14 */

    /* Font Sizes for Body Text */
    --font-size-b-20: 20px; /* B-20 */
    --font-size-b-18: 18px; /* B-18 */
    --font-size-b-16: 16px; /* B-16 */
    --font-size-b-14: 14px; /* B-14 */
    --font-size-b-12: 12px; /* B-12 */
    --font-size-b-10: 10px; /* B-10 */

    /* Line Heights */
    --line-height-normal: normal;
    --line-height-b-20: 26px; /* For B-20 (130%) */
    --line-height-b-18: 24px; /* For B-18 (133.333%) */

    /* Letter Spacing */
    --letter-spacing-h-56: 0.56px;
    --letter-spacing-h-42: 0.42px;
    --letter-spacing-h-32: 0.32px;
    --letter-spacing-h-26: 0.26px;
    --letter-spacing-h-24: 0.24px;
    --letter-spacing-h-22: 0.22px;
    --letter-spacing-h-20: 0.2px;
    --letter-spacing-h-18: 0.18px;
    --letter-spacing-h-16: 0.16px;
    --letter-spacing-h-14: 0.14px;
    --letter-spacing-h-12: 0.12px;

    --letter-spacing-b-26: 0.26px;
    --letter-spacing-b-24: 0.24px;
    --letter-spacing-b-22: 0.22px;
    --letter-spacing-b-20: 0.2px;
    --letter-spacing-b-18: 0.18px;

    /* Text Transform */
    --text-transform-uppercase: uppercase;
    --text-transform-none: none;

    /*========================
        OTHER VARIABLES
    =========================*/

    /* Border Radius */
    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;

    /* Skeleton Design Tokens */
    --skeleton-color-base: rgba(193, 212, 250, 0.18);
    --skeleton-color-highlight: rgba(234, 241, 255, 0.34);
    --skeleton-radius-sm: var(--border-radius-sm);
    --skeleton-radius-md: var(--border-radius-md);
    --skeleton-radius-lg: 12px;
    --skeleton-radius-circle: 999px;
    --skeleton-height-line-xs: 12px;
    --skeleton-height-line-sm: 14px;
    --skeleton-height-line-md: 16px;
    --skeleton-height-line-lg: 20px;
    --skeleton-height-input: 43px;
    --skeleton-height-button: 43px;
    --skeleton-space-sm: var(--spacing-sm);
    --skeleton-space-md: var(--spacing-md);
    --skeleton-shimmer-duration: 1.2s;
    --skeleton-shimmer-easing: ease-in-out;
    --skeleton-shimmer-size: 220% 100%;

    /* Spacing */
    /* Spacing (Desktop > 1024px) */
    --spacing-xs: 4px;      /* Extra Small */
    --spacing-xs-5: 5px;
    --spacing-sm: 8px;       /* Small */
    --spacing-md: 10px;      /* Medium */
    --spacing-lg: 15px;      /* Large */
    --spacing-lg-16: 16px;   /* Large */
    --spacing-xl: 20px;      /* Extra Large */
    --spacing-xxl: 24px;     /* Double Extra Large */
    --spacing-3xl: 30px;     /* Triple Extra Large */
    --spacing-4xl: 32px;     /* Quadruple Extra Large */
    --spacing-5xl: 40px;     /* Quintuple Extra Large */
    --spacing-6xl: 50px;     /* Sextuple Extra Large */
    --spacing-7xl: 60px;     /* Septuple Extra Large */
    --spacing-8xl: 70px;     /* Octuple Extra Large */
    --spacing-9xl: 80px;     /* Nonuple Extra Large */

    /* --spacing-md: 12px; */     /* Medium */
    /* --spacing-lg: 16px; */     /* Large */
    /* --spacing-4xl: 36px; */    /* Quadruple Extra Large */

    /* Navbar Variables */
    --navbar-height: 90px;
    --navbar-padding-y: 22px;
    --navbar-padding-x: 50px;
    --logo-height: 46px;
    --logo-width: 157px;
    --profile-width: 46px; /* square(circle) height == width */

    /* Transition */
    --transition-duration: 0.3s;

    /* Z-Index */
    --z-index-modal: 1000;
    --z-index-tooltip: 1100;

    /* Box Shadows */
    /* --box-shadow-default: 0px 0px 30px rgba(0, 0, 0, 0.3); */
}

/* LAPTOP - 1440px/1280px */
@media (max-width: 1440px) {
    :root {
        /* Navbar Variables - 1440px */
        --navbar-height: 90px;
        --navbar-padding-y: 22px;
        --navbar-padding-x: 40px;
        --logo-height: 46px;
        --logo-width: 157px;
        --profile-width: 46px;
    }
}

/* LAPTOP */
@media (max-width: 1024px) {
    :root {
        --font-size-h-56: 46px;
        --font-size-h-42: 34px;
        --font-size-h-32: 28px;
        --font-size-h-26: 24px;
        --font-size-h-24: 22px;
        --font-size-h-20: 18px;
        --font-size-h-18: 16px;
        --font-size-h-16: 14px;
        --font-size-h-14: 12px;
        --font-size-b-20: 18px;
        --font-size-b-18: 16px;
        --font-size-b-16: 14px;
        --font-size-b-14: 12px;
        --font-size-b-12: 10px;

        /* Spacing (Laptop <= 1024px) */
        /* Scaled down ~20% from Desktop, inspired by 860px table row */
        --spacing-xs: 4px;
        --spacing-sm: 8px;
        --spacing-md: 10px;
        --spacing-lg: 14px;
        --spacing-xl: 18px;
        --spacing-xxl: 20px;
        --spacing-3xl: 24px;
        --spacing-4xl: 30px;
        --spacing-5xl: 32px;
        --spacing-6xl: 40px;
        --spacing-7xl: 48px;
        --spacing-8xl: 56px;
        --spacing-9xl: 64px;
    }
}

/* Large Tablets - 860px */
@media (max-width: 860px) {
    :root {
        /* Navbar Variables - 860px */
        --navbar-height: 84px;
        --navbar-padding-y: 20px;
        --navbar-padding-x: 30px;
        --logo-height: 44px;
        --logo-width: 152px;
        --profile-width: 44px;
    }
}

/* TABLET */
@media (max-width: 768px) {
    :root {
        --font-size-h-56: 36px;
        --font-size-h-42: 28px;
        --font-size-h-32: 24px;
        --font-size-h-26: 20px;
        --font-size-h-24: 18px;
        --font-size-h-20: 18px;
        --font-size-h-18: 14px;
        --font-size-h-16: 14px;
        --font-size-h-14: 10px;
        --font-size-b-20: 18px;
        --font-size-b-18: 16px;
        --font-size-b-16: 14px;
        --font-size-b-14: 12px;
        --font-size-b-12: 10px;

        /* Spacing (Tablet <= 768px) */
        /* Scaled down ~15-20% from Laptop, inspired by 768px table row */
        --spacing-xs: 4px;
        --spacing-sm: 6px;
        --spacing-md: 8px;
        --spacing-lg: 12px;
        --spacing-xl: 16px;
        --spacing-xxl: 18px;
        --spacing-3xl: 20px;
        --spacing-4xl: 24px;
        --spacing-5xl: 28px;
        --spacing-6xl: 36px;
        --spacing-7xl: 42px;
        --spacing-8xl: 48px;
        --spacing-9xl: 54px;

        /* Navbar Variables - 768px */
        --navbar-height: 78px;
        --navbar-padding-y: 18px;
        --navbar-padding-x: 30px;
        --logo-height: 42px;
        --logo-width: 144px;
        --profile-width: 42px;
    }
}

/* Small Tablets - 600px */
@media (max-width: 600px) {
    :root {
        /* Navbar Variables - 600px */
        --navbar-height: 72px;
        --navbar-padding-y: 16px;
        --navbar-padding-x: 30px;
        --logo-height: 40px;
        --logo-width: 137px;
        --profile-width: 40px;
    }
}

/* PHONE */
@media (max-width: 480px) {
    :root {
        --font-size-h-56: 26px;
        --font-size-h-42: 22px;
        --font-size-h-32: 20px;
        --font-size-h-26: 18px;
        --font-size-h-24: 16px;
        --font-size-h-20: 16px;
        --font-size-h-18: 12px;
        --font-size-h-16: 12px;
        --font-size-h-14: 8px;
        --font-size-b-20: 16px;
        --font-size-b-18: 14px;
        --font-size-b-16: 12px;
        --font-size-b-14: 10px;
        --font-size-b-12: 10px;

        /* Line height */
        --line-height-b-18 : normal;
        --line-height-b-20 : normal;

        /* Spacing (Phone <= 480px) */
        /* Scaled down ~20-25% from Tablet, inspired by 414px table row */
        --spacing-xs: 4px;
        --spacing-sm: 6px;
        --spacing-md: 8px;
        --spacing-lg: 10px;
        --spacing-xl: 12px;
        --spacing-xxl: 14px;
        --spacing-3xl: 16px;
        --spacing-4xl: 20px;
        --spacing-5xl: 24px;
        --spacing-6xl: 30px;
        --spacing-7xl: 36px;
        --spacing-8xl: 42px;
        --spacing-9xl: 48px;
    }
}

/* Phones - 414px */
@media (max-width: 414px) {
    :root {
        /* Navbar Variables - 414px */
        --navbar-height: 66px;
        --navbar-padding-y: 14px;
        --navbar-padding-x: 20px;
        --logo-height: 38px;
        --logo-width: 130px;
        --profile-width: 38px;
    }
}

/* Small Phones - 360px */
@media (max-width: 360px) {
    :root {
        /* Navbar Variables - 360px */
        --navbar-height: 60px;
        --navbar-padding-y: 12px;
        --navbar-padding-x: 20px;
        --logo-height: 36px;
        --logo-width: 123px;
        --profile-width: 36px;
    }
}