@import '../../style/themes/token.less';

@typography-prefix: '--@{kd-prefix}-c-typography';

// color
@heading-2-color: var(~'@{typography-prefix}-title-color-text', #276ff5);
@typography-color-text-primary: var(~'@{typography-prefix}-color-text-primary', @color-text-primary);
@typography-color-text-secondary: var(~'@{typography-prefix}-color-text-secondary', @color-text-secondary);
@typography-color-text-third: var(~'@{typography-prefix}-color-text-third', @color-text-third);
@typography-color-warning: var(~'@{typography-prefix}-color-warning', @color-warning);
@typography-color-error: var(~'@{typography-prefix}-color-error', @color-error);
@typography-color-success: var(~'@{typography-prefix}-color-success', @color-success);
@typography-color-disabled: var(~'@{typography-prefix}-color-disabled', @color-disabled);
@typography-link-color: var(~'@{typography-prefix}-color-text-link', @color-text-link);
@typography-link-color-hover: var(~'@{typography-prefix}-color-text-link-hover', @color-text-link-hover);
@typography-link-color-active: var(~'@{typography-prefix}-color-text-link-active', @color-text-link-active);

// font
@typography-title-font-weight: var(~'@{typography-prefix}-title-font-weight', 600);
@heading-1-size: var(~'@{typography-prefix}-font-size-1', 40px);
@heading-2-size: var(~'@{typography-prefix}-font-size-2', 28px);
@heading-3-size: var(~'@{typography-prefix}-font-size-3', 18px);

// motion
@typography-duration-promptly: var(~'@{typography-prefix}-motion-duration', @duration-promptly);

// spacing
@typography-title-margin-top: var(~'@{typography-prefix}-title-spacing-margin-top', 1.2em);
@typography-title-margin-bottom: var(~'@{typography-prefix}-title-spacing-margin-bottom', 0.5em);
@typography-paragraph-margin-bottom: var(~'@{typography-prefix}-paragraph-spacing-margin-bottom', 24px);
@typography-margin-bottom: var(~'@{typography-prefix}-spacing-margin-bottom', 80px);
@heading-1-margin-bottom: var(~'@{typography-prefix}-spacing-margin-bottom-1', 12px);
@heading-2-margin-bottom: var(~'@{typography-prefix}-spacing-margin-bottom-2', 24px);
@heading-3-margin-bottom: var(~'@{typography-prefix}-spacing-margin-bottom-3', 12px);

// sizing
@typography-max-width: var(~'@{typography-prefix}-sizing-width-max', 830px);