/*
 * globals.css
 *
 * This file contains global reset styles and CSS variables for
 * desktop (1024px and up) sizing and spacing.
 * All pixel values have been converted to rem units for better
 * accessibility and consistent scaling when the root font-size changes.
 */

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

img {
   display: block;
   max-width: 100%;
   height: auto;
}

ul[role="list"],
ol[role="list"] {
   list-style: none;
   padding-left: 0;
}

a,
a:visited,
a:active {
   color: inherit;
   text-decoration: none;
}

body,
h1,
h2,
h3,
p {
   margin-block-end: 0;
}

:root {
   /* Color Variables */
   --clr-text-primary: #1d1d1f;
   --clr-text-secondary: #424245;
   --clr-hover-link: #0066cc;
   --clr-bg-card: #f5f5f7;
   --clr-border-white: #fff;
   --clr-violator: #b64400;

   /* Font Size Variables (Desktop Default) */
   --fs-heading: 2.5rem; /* 40px */
   --fs-title: 0.909rem; /* ~14.54px */
   --fs-price: 1rem; /* 16px */
   --fs-violator: 0.797rem; /* ~12.75px */
   --fs-plus: 0.9375rem; /* 15px */
   --fs-shop-link: 1.0625rem; /* 17px */

   /* Font Weight Variables */
   --fw-heading: 600;
   --fw-title: 500;
   --fw-violator: 600;
   --fw-plus: 400;

   /* Line Height Variables */
   --lh-heading: 1.1;
   --lh-title: 1.3;
   --lh-shop-link: 1;

   /* Letter Spacing Variables */
   --ls-violator: -0.0075rem; /* -0.12px */
   --ls-shop-link: -0.017125rem; /* -0.274px */

   /* Main Container Variables */
   --max-w-container: 66.875rem; /* 1070px */
   --m-container: 3.125rem auto 6.25rem; /* 50px auto 100px */

   /* Sub Container Variables */
   --min-h-info-section-container: 7.875rem; /* 126px */
   --h-color-section-container: 1.75rem; /* 28px */
   --h-color-gallery-container: 1rem; /* 16px */
   --h-violator-container: 1.25rem; /* 20px */
   --h-title-container: 4.5rem; /* 72px */
   --h-price-container: 1.25rem; /* 20px */
   --pt-shop-link-container: 1.5rem; /* 24px */
   --px-shop-link-container: 1.25rem; /* 20px */

   /* Spacing Variables - Margin */
   --m-heading: 4.0625rem 0 1.6875rem; /* 65px 0 27px */
   --mt-violator: 1.1875rem; /* 19px */
   --mb-title: 0.375rem; /* 6px */
   --m-price: auto 0 0.4375rem; /* auto 0 7px */
   --mx-dot: 0.2625rem; /* 4.2px */
   --mx-plus: 0.125rem; /* 2px */
   --ml-shop-link-arrow: 0.281rem; /* ~4.5px */
   --mb-shop-link-arrow: 0.125rem; /* 2px */

   /* Spacing Variables - Padding */
   --p-card: 2.5rem 2.5rem 2.125rem; /* 40px 40px 34px */
   --p-title: 0.5rem 0.9375rem 1.5rem; /* 8px 15px 24px */

   /* Color Dot Item & Shop Link Arrowhead Size */
   --size-color-dot: 0.75rem; /* 12px */
   --w-shop-link-arrow: 0.359rem; /* ~5.74px */
   --h-shop-link-arrow: 1.25rem; /* 20px */

   /* Item-2 Image Container */
   --m-item2-image: -2.5rem -2.5rem 0; /* -40px -40px 0 */
   --w-item2-image: calc(100% + 5rem); /* calc(100% + 80px) */
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: var(--clr-text-primary);
}