/**
 * Tokens from saved Customer Account bundle:
 *   (Customer account vendor CSS reference — scaled for this demo.)
 *   vendors-node_modules_pnpm_remote-ui_async-subscription_2_1_16_node_modules_remote-ui_async-su-9b13ab-ff7f38647eac88888d32.css
 *
 * Original :root defines --x-spacing-* and --x-typography-size-* in rem for Shopify’s
 * customer-account rem scale (1rem = 10px on their page). This project uses html 16px
 * (see styles.css); values are converted with px = (shopify_rem × 10), then rem_16 = px ÷ 16.
 *
 * Border radii in the bundle are already px and are copied verbatim.
 */
:root {
  --x-border-radius-none: 0;
  --x-border-radius-small: 4px;
  --x-border-radius-base: 8px;
  --x-border-radius-large: 12px;
  --x-border-width-base: 1px;

  /* --x-spacing-* from bundle */
  --x-spacing-small-500: 0.1875rem; /* 0.3rem @10px → 3px */
  --x-spacing-small-400: 0.3125rem; /* 5px */
  --x-spacing-small-300: 0.4375rem; /* 7px */
  --x-spacing-small-200: 0.5625rem; /* 9px */
  --x-spacing-small-100: 0.6875rem; /* 11px */
  --x-spacing-base: 0.875rem; /* 14px */
  --x-spacing-large-100: 1.0625rem; /* 17px */
  --x-spacing-large-200: 1.3125rem; /* 21px */
  --x-spacing-large-300: 1.625rem; /* 26px */
  --x-spacing-large-400: 2rem; /* 32px */

  /* --x-typography-size-* from bundle */
  --x-typography-size-extra-small: 0.625rem; /* 10px */
  --x-typography-size-small: 0.75rem; /* 12px */
  --x-typography-size-default: 0.875rem; /* 14px */
  /* main-*.css references size-base; not always in :root chunk — match default */
  --x-typography-size-base: 0.875rem;
  --x-typography-size-medium: 1rem; /* 16px */
  --x-typography-size-large: 1.1875rem; /* 19px */
  --x-typography-size-extra-large: 1.3125rem; /* 21px */

  --x-typography-primary-weight-bold: 600;
  --x-typography-font-weight-base: 400;
}