:root {

/* -----------------------------
   COLORS
----------------------------- */

--color-primary: #000;
--color-primary-hover: #333;

--color-highlight: #f3f3f3;

--color-secondary: #d4af37;
--color-secondary-hover: #b8962f;

--color-text: #222;
--color-text-light: #666;

--color-bg: #ffffff;
--color-bg-alt: #f5f5f7;

--color-border: #cececf;
--color-dark-gray: #dedee2;

--color-blue: #006EDB;
--color-blue-light: #e9f4fe;
--color-success: #28a745;
--color-warning: #ffc107;
--color-error: #dc3545;


/* -----------------------------
   TYPOGRAPHY
----------------------------- */
--font-main: "Google Sans", sans-serif;

--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 15px;
--font-size-lg: 17px;
--font-size-xl: 20px;
--font-size-xl-plus: 23px;
--font-size-xxl: 26px;
--font-size-xxxl: 32px;


/* -----------------------------
   SPACING
----------------------------- */

--space-xs: 4px;
--space-sm: 6px;
--space-sm-plus: 8px;
--space-md: 12px;
--space-lg: 18px;
--space-xl: 24px;
--space-xxl: 32px;


/* -----------------------------
   BORDER RADIUS
----------------------------- */

--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 22px;
--radius-xxl: 30px;
--radius-round: 999px;


/* -----------------------------
   SHADOWS
----------------------------- */

--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 30px rgba(0,0,0,0.15);


/* -----------------------------
   CONTAINER
----------------------------- */

--container-width: 1000px;


}

.size-4 { width: 16px; height: 16px; }
.size-5 { width: 20px; height: 20px; }
.size-6 { width: 24px; height: 24px; }
.size-7 { width: 30px; height: 30px; }
.size-8 { width: 50px; height: 50px; }
.size-lg { width: 30px; }

svg{
   cursor: pointer;
}

svg.default{
   cursor: default;
}

@media (min-width: 768px) {

    /* DESKTOP */

    :root {

      /* -----------------------------
         TYPOGRAPHY
      ----------------------------- */
      --font-size-xs: 12px;
      --font-size-sm: 14px;
      --font-size-base: 16px;
      --font-size-lg: 18px;
      --font-size-xl: 20px;
      --font-size-xxl: 36px;
      --font-size-xxxl: 46px;
      --font-size-xl-plus: 26px;

      /* -----------------------------
         SPACING
      ----------------------------- */

      --space-xs: 4px;
      --space-sm: 8px;
      --space-sm-plus: 12px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 32px;
      --space-xxl: 48px;

    }

}