/* ==========================================================================
   Design tokens — extracted from the "Micro Center Ai LP" Figma file
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --mc-blue: #0073df;
  --mc-blue-bright: #01b1fd;
  --mc-blue-pale: #86b5e1;
  --mc-gradient: linear-gradient(90deg, var(--mc-blue) 67.6%, var(--mc-blue-bright) 99.4%);
  --mc-gradient-flat: linear-gradient(90deg, var(--mc-blue), var(--mc-blue-bright));

  /* --- Accents ---------------------------------------------------------- */
  --nvidia-green: #76b900;
  --star-gold: #ffc420;
  --price-sale: #c00;
  --badge-navy: #1c3850;
  --inside-ai-gradient: linear-gradient(
    103deg,
    rgb(199 174 203) 15.5%,
    rgb(191 177 205) 36.9%,
    rgb(174 181 210) 58.3%
  );

  /* --- Neutrals --------------------------------------------------------- */
  --white: #fff;
  --black: #000;
  --ink: #161616;
  --gray-600: #515151;
  --gray-500: #525252;
  --gray-300: #dfdfdf;
  --gray-250: #dbdbdb;
  --gray-200: #ececec;
  --gray-150: #e9e9e9;
  --gray-100: #f4f4f4;
  --gray-050: #f3f3f3;

  /* --- Surfaces --------------------------------------------------------- */
  --page-bg: var(--gray-050);
  --surface: var(--white);
  --footer-bg: var(--ink);
  --hairline: var(--gray-300);

  /* --- Typography ------------------------------------------------------- */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', roboto,
    helvetica, arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid type. Each clamp runs from the 320px design value to the 1512px one. */
  --fs-hero: clamp(2rem, 1.36rem + 3.2vw, 3.125rem); /* 32 → 50 */
  --fs-section: clamp(1.5rem, 1.15rem + 1.75vw, 2.25rem); /* 24 → 36 */
  --fs-section-lg: clamp(1.5rem, 0.98rem + 2.6vw, 2.625rem); /* 24 → 42 */
  --fs-display: clamp(1.75rem, 0.95rem + 4vw, 2.8125rem); /* 28 → 45 */
  --fs-card-title: clamp(1.25rem, 1.08rem + 0.85vw, 2rem); /* 20 → 32 */
  --fs-feature-title: 1.375rem; /* 22 */
  --fs-lead: 1.25rem; /* 20 */
  --fs-body: 1rem; /* 16 */
  --fs-sm: 0.875rem; /* 14 */
  --fs-xs: 0.75rem; /* 12 */
  --fs-jump-label: clamp(1rem, 0.86rem + 0.7vw, 1.5rem); /* 16 → 24 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1220px;
  --gutter: 14px;
  --section-gap: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  /* --- Radii ------------------------------------------------------------ */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-pill: 500px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-card: 0 0 16px 0 rgb(0 0 0 / 12%);
  --shadow-panel: 0 4px 16px 0 rgb(0 0 0 / 8%);
  --shadow-image: 0 4px 4px 0 rgb(0 0 0 / 25%);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 60px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}