:root {
  /*
   * Border radius
   */

  --cx-border-radius-small  : 4px;     /* 4px */
  --cx-border-radius-medium : 6px;     /* 6px */
  --cx-border-radius-large  : 8px;     /* 8px */
  --cx-border-radius-x-large: 12px;    /* 16px */
  --cx-border-radius-circle : 50%;
  --cx-border-radius-pill   : 9999px;

  /*
   * Typography
   */

  /* Fonts */
  --cx-font-mono: sfmono-regular, consolas, 'Liberation Mono', menlo, monospace;
  --cx-font-sans: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI',
    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --cx-font-serif: georgia, 'Times New Roman', serif;

  /* Font sizes */
  --cx-font-size-2x-small    : 10px;  /* 10px */
  --cx-font-size-x-small     : 12px;  /* 12px */
  --cx-font-size-small       : 14px;  /* 14px */
  --cx-font-size-medium      : 16px;  /* 16px */
  --cx-font-size-medium-large: 18px;  /* 18px */
  --cx-font-size-large       : 20px;  /* 20px */
  --cx-font-size-x-large     : 24px;  /* 24px */
  --cx-font-size-2x-large    : 28px;  /* 28px */
  --cx-font-size-3x-large    : 32px;  /* 32px */
  --cx-font-size-4x-large    : 72px;  /* 72px */

  /* Font weights */
  --cx-font-weight-light   : 300;  /* Light */
  --cx-font-weight-regular : 400;  /* Regular */
  --cx-font-weight-medium  : 500;  /* Medium */
  --cx-font-weight-semibold: 600;  /* Semi-bold */
  --cx-font-weight-bold    : 700;  /* Bold */

  /* Letter spacings */
  --cx-letter-spacing-denser: -0.03em;
  --cx-letter-spacing-dense : -0.015em;
  --cx-letter-spacing-normal: normal;
  --cx-letter-spacing-loose : 0.075em;
  --cx-letter-spacing-looser: 0.15em;

  /* Line heights */
  --cx-line-height-3x-large    : 36px;
  --cx-line-height-2x-large    : 32px;
  --cx-line-height-x-large     : 28px;
  --cx-line-height-large       : 24px;
  --cx-line-height-medium      : 20px;
  --cx-line-height-small       : 18px;
  --cx-line-height-x-small     : 16px;

  /* Paragraph spacing */
  --paragraph-spacing-large : 1.125em;
  --paragraph-spacing-medium: 1em;
  --paragraph-spacing-small : 0.75em;

  /* Focus rings */
  --cx-focus-ring-style : solid;
  --cx-focus-ring-width : 3px;
  --cx-focus-ring-offset: 1px;

  /* Global */
  --cx-heading-font-family: var(--cx-font-sans);            /* Added */
  --cx-heading-font-weight: var(--cx-font-weight-regular);  /* Added */
  --cx-heading-line-height: var(--cx-line-height-medium);   /* Added */
  --cx-heading-1-font-size: var(--cx-font-size-2x-large);   /* Added */
  --cx-heading-2-font-size: var(--cx-font-size-x-large);    /* Added */
  --cx-heading-3-font-size: var(--cx-font-size-large);      /* Added */
  --cx-heading-4-font-size: var(--cx-font-size-medium);     /* Added */
  --cx-heading-5-font-size: var(--cx-font-size-small);      /* Added */
  --cx-heading-6-font-size: var(--cx-font-size-x-small);    /* Added */

  /*
   * Forms
   */

  /* Buttons */
  --cx-button-border-radius-large      : var(--cx-border-radius-medium);
  --cx-button-border-radius-medium     : var(--cx-border-radius-medium);
  --cx-button-border-radius-small      : var(--cx-border-radius-medium);
  --cx-button-font-size-large          : var(--cx-font-size-medium);
  --cx-button-font-size-medium         : var(--cx-font-size-small);
  --cx-button-font-size-small          : var(--cx-font-size-x-small);
  --cx-button-padding-horizontal-large : var(--cx-spacing-large);         /* Added */
  --cx-button-padding-horizontal-medium: var(--cx-spacing-medium);        /* Added */
  --cx-button-padding-horizontal-small : var(--cx-spacing-small);         /* Added */
  --cx-button-text-transform           : uppercase;                       /* Added */

  /* Inputs */
  --cx-input-border-radius-large    : var(--cx-border-radius-large);
  --cx-input-border-radius-medium   : var(--cx-border-radius-large);
  --cx-input-border-radius-small    : var(--cx-border-radius-large);
  --cx-input-border-width           : 1px;
  --cx-input-focus-ring-offset      : 0;
  --cx-input-font-family            : var(--cx-font-sans);
  --cx-input-font-size-large        : var(--cx-font-size-large);
  --cx-input-font-size-medium       : var(--cx-font-size-medium);
  --cx-input-font-size-small        : var(--cx-font-size-small);
  --cx-input-font-weight            : var(--cx-font-weight-regular);
  --cx-input-height-x-large         : 48px;
  --cx-input-height-large           : 40px;
  --cx-input-height-medium          : 32px;
  --cx-input-height-small           : 24px;
  --cx-input-letter-spacing         : var(--cx-letter-spacing-normal);
  --cx-input-required-content       : '*';
  --cx-input-required-content-offset: -2px;
  --cx-input-spacing-large          : var(--cx-spacing-medium);
  --cx-input-spacing-medium         : var(--cx-spacing-medium);
  --cx-input-spacing-small          : var(--cx-spacing-medium);

  /* Font tokens */
  --cx-font-heading-2x-large: var(--cx-font-weight-semi-bold,600) var(--cx-font-size-2x-large,28px)/var(--cx-font-line-height-32,32px) var(--cx-font-sans,'Inter');
  --cx-font-heading-3x-large: var(--cx-font-weight-semi-bold,600) var(--cx-font-size-3x-large,32px)/var(--cx-font-line-height-36,36px) var(--cx-font-sans,'Inter');
  --cx-font-heading-large: var(--cx-font-weight-semi-bold,600) var(--cx-font-size-large,20px)/var(--cx-font-line-height-24,24px) var(--cx-font-sans,'Inter');
  --cx-font-heading-medium: var(--cx-font-weight-semi-bold,600) var(--cx-font-size-medium,16px)/var(--cx-font-line-height-20,20px) var(--cx-font-sans,'Inter');
  --cx-font-heading-small: var(--cx-font-weight-semi-bold,600) var(--cx-font-size-small,14px)/var(--cx-font-line-height-20,20px) var(--cx-font-sans,'Inter');
  --cx-font-heading-x-large: var(--cx-font-weight-semi-bold,600) var(--cx-font-size-x-large,24px)/var(--cx-font-line-height-28,28px) var(--cx-font-sans,'Inter');
  --cx-font-label-medium: var(--cx-font-weight-regular,400) var(--cx-font-size-medium,16px)/var(--cx-font-line-height-20,20px) var(--cx-font-sans,'Inter');
  --cx-font-label-small: var(--cx-font-weight-regular,400) var(--cx-font-size-small,14px)/var(--cx-font-line-height-16,16px) var(--cx-font-sans,'Inter');
  --cx-font-label-x-small: var(--cx-font-weight-regular,400) var(--cx-font-size-x-small,12px)/var(--cx-font-line-height-16,16px) var(--cx-font-sans,'Inter');
  --cx-font-paragraph-large: var(--cx-font-weight-regular,400) var(--cx-font-size-medium-large,18px)/var(--cx-font-line-height-28,28px) var(--cx-font-sans,'Inter');
  --cx-font-paragraph-medium: var(--cx-font-weight-regular,400) var(--cx-font-size-medium,16px)/var(--cx-font-line-height-24,24px) var(--cx-font-sans,'Inter');
  --cx-font-paragraph-small: var(--cx-font-weight-regular,400) var(--cx-font-size-small,14px)/var(--cx-font-line-height-20,20px) var(--cx-font-sans,'Inter');


  /* Labels */
  --cx-input-label-font-size-large    : var(--cx-font-size-x-small);
  --cx-input-label-font-size-medium   : var(--cx-font-size-x-small);
  --cx-input-label-font-size-small    : var(--cx-font-size-x-small);
  --cx-input-label-text-transform     : none;
  --cx-radio-label-text-transform     : none;
  --cx-checkbox-label-text-transform  : none;
  --cx-radio-card-label-text-transform: none;


  /* Help text */
  --cx-input-help-text-font-size-large : var(--cx-font-size-medium);
  --cx-input-help-text-font-size-medium: var(--cx-font-size-small);
  --cx-input-help-text-font-size-small : var(--cx-font-size-x-small);

  /* Toggles (checkboxes, radios, switches) */
  --cx-toggle-size-small : 16px;  /* 16px */
  --cx-toggle-size-medium: 20px;  /* 20px */
  --cx-toggle-size-large : 22px;  /* 22px */

  /*
   * Panels
   */

  --cx-panel-border-width: 1px;

  /*
   * Spacings
   */

  --cx-spacing-3x-small: 2px;   /* 2px */
  --cx-spacing-2x-small: 4px;   /* 4px */
  --cx-spacing-x-small : 8px;   /* 8px */
  --cx-spacing-small   : 12px;  /* 12px */
  --cx-spacing-medium  : 16px;  /* 16px */
  --cx-spacing-large   : 20px;  /* 20px */
  --cx-spacing-x-large : 28px;  /* 28px */
  --cx-spacing-2x-large: 36px;  /* 36px */
  --cx-spacing-3x-large: 48px;  /* 48px */
  --cx-spacing-4x-large: 72px;  /* 72px */

  /*
   * Tooltips
   */

  --cx-tooltip-arrow-size      : 0;
  --cx-tooltip-border-radius   : var(--cx-border-radius-medium);
  --cx-tooltip-font-family     : var(--cx-font-sans);
  --cx-tooltip-font-size       : var(--cx-font-size-small);
  --cx-tooltip-font-weight     : var(--cx-font-weight-regular);
  --cx-tooltip-line-height     : var(--cx-line-height-medium);
  --cx-tooltip-padding         : var(--cx-spacing-2x-small) var(--cx-spacing-x-small);
  --cx-tooltip-background-color: #27272A;
  --cx-tooltip-color           : #FFF;

  /*
   * Transitions
   */

  --cx-transition-x-slow: 1000ms;
  --cx-transition-slow  : 500ms;
  --cx-transition-medium: 250ms;
  --cx-transition-fast  : 150ms;
  --cx-transition-x-fast: 50ms;

  /*
   * Z-indexes
   */

  --cx-z-index-drawer  : 700;
  --cx-z-index-dialog  : 800;
  --cx-z-index-dropdown: 900;
  --cx-z-index-toast   : 950;
  --cx-z-index-tooltip : 1000;
}

.medium-zoom-overlay {
  z-index: 900;
}

.medium-zoom-image {
  z-index: 1000;
}
