/*
  GD4 Typography utilities
  - Token-like classes: gd4-label-*, gd4-paragraph-*, gd4-heading-*
  - Modifiers (BEM): --required, --flex, --dark, --darkest, --subtlest, --link, --disabled, --inherit-color
*/

/* Base shared styles (matches commonStyles in styled-components) */
.gd4-label-small,
.gd4-label-small--required,
.gd4-label-small--flex,
.gd4-label-small--dark,
.gd4-label-small--darkest,
.gd4-label-small--subtlest,
.gd4-label-small--link,
.gd4-label-small--disabled,
.gd4-label-small--inherit-color,
.gd4-label-medium,
.gd4-label-medium--required,
.gd4-label-medium--flex,
.gd4-label-medium--dark,
.gd4-label-medium--darkest,
.gd4-label-medium--subtlest,
.gd4-label-medium--link,
.gd4-label-medium--disabled,
.gd4-label-medium--inherit-color,
.gd4-label-large,
.gd4-label-large--required,
.gd4-label-large--flex,
.gd4-label-large--dark,
.gd4-label-large--darkest,
.gd4-label-large--subtlest,
.gd4-label-large--link,
.gd4-label-large--disabled,
.gd4-label-large--inherit-color,
.gd4-paragraph-x-small,
.gd4-paragraph-x-small--required,
.gd4-paragraph-x-small--flex,
.gd4-paragraph-x-small--dark,
.gd4-paragraph-x-small--darkest,
.gd4-paragraph-x-small--subtlest,
.gd4-paragraph-x-small--link,
.gd4-paragraph-x-small--disabled,
.gd4-paragraph-x-small--inherit-color,
.gd4-paragraph-small,
.gd4-paragraph-small--required,
.gd4-paragraph-small--flex,
.gd4-paragraph-small--dark,
.gd4-paragraph-small--darkest,
.gd4-paragraph-small--subtlest,
.gd4-paragraph-small--link,
.gd4-paragraph-small--disabled,
.gd4-paragraph-small--inherit-color,
.gd4-paragraph-medium,
.gd4-paragraph-medium--required,
.gd4-paragraph-medium--flex,
.gd4-paragraph-medium--dark,
.gd4-paragraph-medium--darkest,
.gd4-paragraph-medium--subtlest,
.gd4-paragraph-medium--link,
.gd4-paragraph-medium--disabled,
.gd4-paragraph-medium--inherit-color,
.gd4-heading-x-small,
.gd4-heading-x-small--required,
.gd4-heading-x-small--flex,
.gd4-heading-x-small--dark,
.gd4-heading-x-small--darkest,
.gd4-heading-x-small--subtlest,
.gd4-heading-x-small--link,
.gd4-heading-x-small--disabled,
.gd4-heading-x-small--inherit-color {
  font-family: 'Open Sans';
  text-overflow: ellipsis;
  overflow: hidden;

  /* default color (matches getColor default when dark=false) */
  color: var(--autodoc-color-text-neutral-color-text-subtlest);
}

/* --- Modifiers: required marker (matches genRequired) --- */
.gd4-label-small--required::after,
.gd4-label-medium--required::after,
.gd4-label-large--required::after,
.gd4-paragraph-x-small--required::after,
.gd4-paragraph-small--required::after,
.gd4-paragraph-medium--required::after,
.gd4-heading-x-small--required::after {
  content: '*';
  color: var(--autodoc-color-border-feedback-color-border-danger);
  margin-left: 4px;
}

/* --- Modifiers: flex helper (matches applyFlex) --- */
.gd4-label-small--flex,
.gd4-label-medium--flex,
.gd4-label-large--flex,
.gd4-paragraph-x-small--flex,
.gd4-paragraph-small--flex,
.gd4-paragraph-medium--flex,
.gd4-heading-x-small--flex {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Modifiers: color variants (matches getColor) --- */
.gd4-label-small--dark,
.gd4-label-medium--dark,
.gd4-label-large--dark,
.gd4-paragraph-x-small--dark,
.gd4-paragraph-small--dark,
.gd4-paragraph-medium--dark,
.gd4-heading-x-small--dark {
  color: var(--autodoc-color-text-neutral-color-text);
}

.gd4-label-small--darkest,
.gd4-label-medium--darkest,
.gd4-label-large--darkest,
.gd4-paragraph-x-small--darkest,
.gd4-paragraph-small--darkest,
.gd4-paragraph-medium--darkest,
.gd4-heading-x-small--darkest {
  color: var(--autodoc-color-text-accent-color-text-accent-gray-bolder);
}

.gd4-label-small--subtlest,
.gd4-label-medium--subtlest,
.gd4-label-large--subtlest,
.gd4-paragraph-x-small--subtlest,
.gd4-paragraph-small--subtlest,
.gd4-paragraph-medium--subtlest,
.gd4-heading-x-small--subtlest {
  color: var(--autodoc-color-text-neutral-color-text-subtle);
}

.gd4-label-small--link,
.gd4-label-medium--link,
.gd4-label-large--link,
.gd4-paragraph-x-small--link,
.gd4-paragraph-small--link,
.gd4-paragraph-medium--link,
.gd4-heading-x-small--link {
  color: var(--autodoc-color-text-link-color-link);
}

.gd4-label-small--disabled,
.gd4-label-medium--disabled,
.gd4-label-large--disabled,
.gd4-paragraph-x-small--disabled,
.gd4-paragraph-small--disabled,
.gd4-paragraph-medium--disabled,
.gd4-heading-x-small--disabled {
  color: var(--autodoc-color-text-neutral-color-text-disabled);
}

.gd4-label-small--inherit-color,
.gd4-label-medium--inherit-color,
.gd4-label-large--inherit-color,
.gd4-paragraph-x-small--inherit-color,
.gd4-paragraph-small--inherit-color,
.gd4-paragraph-medium--inherit-color,
.gd4-heading-x-small--inherit-color {
  color: inherit;
}

/* --- Tokens (match your styled-components definitions) --- */
.gd4-label-small,
.gd4-label-small--required,
.gd4-label-small--flex,
.gd4-label-small--dark,
.gd4-label-small--darkest,
.gd4-label-small--subtlest,
.gd4-label-small--link,
.gd4-label-small--disabled,
.gd4-label-small--inherit-color {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.gd4-label-medium,
.gd4-label-medium--required,
.gd4-label-medium--flex,
.gd4-label-medium--dark,
.gd4-label-medium--darkest,
.gd4-label-medium--subtlest,
.gd4-label-medium--link,
.gd4-label-medium--disabled,
.gd4-label-medium--inherit-color {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}

.gd4-label-large,
.gd4-label-large--required,
.gd4-label-large--flex,
.gd4-label-large--dark,
.gd4-label-large--darkest,
.gd4-label-large--subtlest,
.gd4-label-large--link,
.gd4-label-large--disabled,
.gd4-label-large--inherit-color {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
}

.gd4-paragraph-x-small,
.gd4-paragraph-x-small--required,
.gd4-paragraph-x-small--flex,
.gd4-paragraph-x-small--dark,
.gd4-paragraph-x-small--darkest,
.gd4-paragraph-x-small--subtlest,
.gd4-paragraph-x-small--link,
.gd4-paragraph-x-small--disabled,
.gd4-paragraph-x-small--inherit-color {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

.gd4-paragraph-small,
.gd4-paragraph-small--required,
.gd4-paragraph-small--flex,
.gd4-paragraph-small--dark,
.gd4-paragraph-small--darkest,
.gd4-paragraph-small--subtlest,
.gd4-paragraph-small--link,
.gd4-paragraph-small--disabled,
.gd4-paragraph-small--inherit-color {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

.gd4-paragraph-medium,
.gd4-paragraph-medium--required,
.gd4-paragraph-medium--flex,
.gd4-paragraph-medium--dark,
.gd4-paragraph-medium--darkest,
.gd4-paragraph-medium--subtlest,
.gd4-paragraph-medium--link,
.gd4-paragraph-medium--disabled,
.gd4-paragraph-medium--inherit-color {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

.gd4-heading-x-small,
.gd4-heading-x-small--required,
.gd4-heading-x-small--flex,
.gd4-heading-x-small--dark,
.gd4-heading-x-small--darkest,
.gd4-heading-x-small--subtlest,
.gd4-heading-x-small--link,
.gd4-heading-x-small--disabled,
.gd4-heading-x-small--inherit-color {
  font-family: 'Open Sans';
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  margin: 0;
}