/* ==========================================================================
   tokens.css — the design layer.
   Every value here was measured off the reference and re-expressed as a named
   custom property so the rest of the stylesheet never carries a raw hex code.
   The reference names several of its own variables; we keep the same names where
   a value is identical so the two token sets stay comparable, and add ours
   underneath with a `--tx-` prefix for everything the reference does not expose.
   ========================================================================== */

:root {
  /* ---- type ------------------------------------------------------------ */
  --tx-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  --tx-font-heading: var(--tx-font-body);

  --tx-fs-root: 15px;
  --tx-fs-xs: 12px;
  --tx-fs-sm: 13px;
  --tx-fs-base: 14px;
  --tx-fs-md: 16px;
  --tx-fs-lg: 20px;
  --tx-fs-xl: 24px;
  --tx-fs-2xl: 30px;
  --tx-fs-3xl: 40px;

  --tx-lh-tight: 1.2;
  --tx-lh-body: 1.55;

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

  /* ---- brand ----------------------------------------------------------- */
  --accent-color: #006930;
  --accent-color-darken: #001c0d;
  --accent-color-hover: var(--accent-color-darken);
  --accent-color-rgb: 0, 105, 48;

  --tx-teal: #56cfe1;
  --tx-teal-hover: #00badb;
  --tx-orange: #ff4e00;
  --tx-sale: #ec0101;

  /* ---- ink ------------------------------------------------------------- */
  --heading-color: #222222;
  --text-color: #000000;
  --color: #222222;
  --content-cl: #878787;
  --product-title-color: #222222;
  --product-title-color-hover: var(--accent-color);
  --product-price-color: #696969;
  --product-price-sale-color: var(--tx-sale);
  --product-vendors-color: #878787;

  /* ---- surfaces -------------------------------------------------------- */
  --tx-bg: #ffffff;
  --tx-bg-soft: #f7f7f7;
  --tx-bg-muted: #e5e5e5;
  --h-bg-color: #ffffff;
  --tx-header-text: #222222;
  --tx-header-text-hover: var(--accent-color);

  /* ---- lines ----------------------------------------------------------- */
  --tx-border: #e6e6e6;
  --tx-border-strong: #dddddd;
  --tx-border-primary: #333;

  /* ---- controls -------------------------------------------------------- */
  --btn-radius: 60px;
  --pr-btn-radius-size: 40px;
  --tx-radius-sm: 2px;
  --tx-radius-md: 12px;
  --tx-radius-lg: 20px;

  /* ---- feedback -------------------------------------------------------- */
  --tx-error: #EB001B;
  --tx-success: #428445;
  --tx-warning: #e0b252;

  /* ---- product card ---------------------------------------------------- */
  --product-title-size: 14px;
  --product-title-weight: 500;
  --product-title-line-height: 20px;
  --product-price-size: 14px;
  --product-price-weight: 400;
  --product-space-img-txt: 15px;
  --product-space-elements: 0px;

  /* ---- layout ---------------------------------------------------------- */
  --ts-gutter-x: 3rem;
  --tx-container: 1200px;
  --tx-container-wide: 1440px;
  --tx-gutter-mobile: 15px;
  --tx-gutter-desktop: 30px;

  /* ---- motion ---------------------------------------------------------- */
  --tx-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tx-dur-fast: 0.15s;
  --tx-dur: 0.25s;
  --tx-dur-slow: 0.45s;
  --tx-header-h: 70px;

  /* ---- z-index --------------------------------------------------------- */
  --tx-z-header: 100;
  --tx-z-drawer: 200;
  --tx-z-overlay: 190;
  --tx-z-lightbox: 300;
}

/* The reference collapses its type scale below 768px rather than scaling it. */
@media (max-width: 767px) {
  :root {
    --tx-fs-lg: 18px;
    --tx-fs-xl: 20px;
    --tx-fs-2xl: 24px;
    --tx-fs-3xl: 28px;
    --tx-header-h: 60px;
    --tx-gutter-mobile: 12px;
  }
}

/* Respect a reduced-motion preference for every transition and animation we own. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tx-dur-fast: 0.01ms;
    --tx-dur: 0.01ms;
    --tx-dur-slow: 0.01ms;
  }
}