@use './light' as light;
@use './dark' as dark;
@use './index' as common;
@use 'sass:color';

html:root {
  --primary-1: #{light.$primary-1};
  --primary-2: #{light.$primary-2};
  --primary-3: #{light.$primary-3};
  --primary-4: #{light.$primary-4};
  --primary-5: #{light.$primary-5};
  --primary-6: #{light.$primary-6};
  --primary-7: #{light.$primary-7};
  --primary-8: #{light.$primary-8};
  --primary-9: #{light.$primary-9};
  --primary-10: #{light.$primary-10};
  --primary-6-rgb: #{color.channel(light.$primary-6, 'red', $space: rgb)}, #{color.channel(light.$primary-6, 'green', $space: rgb)}, #{color.channel(light.$primary-6, 'blue', $space: rgb)};

  --text-main: #{light.$text-main};
  --text-secondary: #{light.$text-secondary};
  --text-auxiliary: #{light.$text-auxiliary};
  --text-placeholder: #{light.$text-placeholder-disabled};
  --text-white: #{light.$text-white};
  --text-oppo-bg: #{light.$text-oppo-bg};

  --icon-main: #{light.$icon-main};
  --icon-secondary: #{light.$icon-secondary};
  --icon-auxiliary: #{light.$icon-auxiliary};
  --icon-placeholder: #{light.$icon-placeholder-disabled};
  --icon-white: #{light.$icon-white};

  --border-extra-strong: #{light.$border-extra-Strong};
  --border-strong: #{light.$border-Strong};
  --border-main: #{light.$border-main};
  --border-light: #{light.$border-light};
  --border-white: #{light.$border-white};

  --divider-strong: #{light.$divider-strong};
  --divider-main: #{light.$divider-main};
  --divider-light: #{light.$divider-light};
  --divider-white: #{light.$divider-white};

  --filled-extra-strong: #{light.$filled-extra-strong};
  --filled-strong: #{light.$filled-strong};
  --filled-content: #{light.$filled-content};
  --filled-bottom: #{light.$filled-bottom};
  --filled-oppo: #{light.$filled-oppo};

  --feedback-hover: #{light.$feedback-hover};
  --feedback-active: #{light.$feedback-active};
  --feedback-accent: #{light.$feedback-accent};

  --opacfilled-tooltip-toast-cover: #{light.$opacfilled-tooltip_toast_cover};
  --opacfilled-main-cover: #{light.$opacfilled-main-cover};
  --opacfilled-light-cover: #{light.$opacfilled-light-cover};

  --danger-main: #{light.$danger-main};
  --danger-hover: #{light.$danger-hover};
  --danger-clicked: #{light.$danger-clicked};
  --danger-disabled: #{light.$danger-disabled};
  --danger-particular: #{light.$danger-particular};
  --danger-surface: #{light.$danger-surface};
  --danger-main-rgb: #{color.channel(light.$danger-main, 'red', $space: rgb)}, #{color.channel(light.$danger-main, 'green', $space: rgb)}, #{color.channel(light.$danger-main, 'blue', $space: rgb)};

  --success-normal: #{light.$success-normal};
  --success-hover: #{light.$success-hover};
  --success-clicked: #{light.$success-clicked};
  --success-disabled: #{light.$success-disabled};
  --success-particular: #{light.$success-particular};
  --success-surface: #{light.$success-surface};
  --success-normal-rgb: #{color.channel(light.$success-normal, 'red', $space: rgb)}, #{color.channel(light.$success-normal, 'green', $space: rgb)}, #{color.channel(light.$success-normal, 'blue', $space: rgb)};

  --warning-normal: #{light.$warning-normal};
  --warning-hover: #{light.$warning-hover};
  --warning-clicked: #{light.$warning-clicked};
  --warning-disabled: #{light.$warning-disabled};
  --warning-particular: #{light.$warning-particular};
  --warning-surface: #{light.$warning-surface};
  --warning-normal-rgb: #{color.channel(light.$warning-normal, 'red', $space: rgb)}, #{color.channel(light.$warning-normal, 'green', $space: rgb)}, #{color.channel(light.$warning-normal, 'blue', $space: rgb)};

  --classifyapplication-yellow-background: #{light.$classifyapplication-yellow-background};
  --classifyapplication-yellow-border: #{light.$classifyapplication-yellow-border};
  --classifyapplication-yellow-content: #{light.$classifyapplication-yellow-content};
  --classifyapplication-lightblue-background: #{light.$classifyapplication-lightblue-background};
  --classifyapplication-lightblue-border: #{light.$classifyapplication-lightblue-border};
  --classifyapplication-lightblue-content: #{light.$classifyapplication-lightblue-content};
  --classifyapplication-cyan-background: #{light.$classifyapplication-cyan-background};
  --classifyapplication-cyan-border: #{light.$classifyapplication-cyan-border};
  --classifyapplication-cyan-content: #{light.$classifyapplication-cyan-content};
  --classifyapplication-purple-background: #{light.$classifyapplication-purple-background};
  --classifyapplication-purple-border: #{light.$classifyapplication-purple-border};
  --classifyapplication-purple-content: #{light.$classifyapplication-purple-content};
  --classifyapplication-grape-background: #{light.$classifyapplication-grape-background};
  --classifyapplication-grape-border: #{light.$classifyapplication-grape-border};
  --classifyapplication-grape-content: #{light.$classifyapplication-grape-content};
  --classifyapplication-pink-background: #{light.$classifyapplication-pink-background};
  --classifyapplication-pink-border: #{light.$classifyapplication-pink-border};
  --classifyapplication-pink-content: #{light.$classifyapplication-pink-content};
  --classifyapplication-volcano-background: #{light.$classifyapplication-volcano-background};
  --classifyapplication-volcano-border: #{light.$classifyapplication-volcano-border};
  --classifyapplication-volcano-content: #{light.$classifyapplication-volcano-content};

  --radius-zero: #{common.$radius-zero};
  --radius-small: #{common.$radius-small};
  --radius-main: #{common.$radius-main};
  --radius-large: #{common.$radius-large};
  --radius-extra-large: #{common.$radius-extra-large};
  --radius-super-large: #{common.$radius-super-large};
  --radius-ultra-large: #{common.$radius-ultra-large};
  --radius-full: #{common.$radius-full};

  --stroke-light: #{common.$stroke-light};
  --stroke-zero: #{common.$stroke-zero};
  --stroke-main: #{common.$stroke-main};
  --stroke-bold: #{common.$stroke-bold};

  --padding-zero: #{common.$padding-zero};
  --padding-ultra-tight: #{common.$padding-ultra-tight};
  --padding-super-tight: #{common.$padding-super-tight};
  --padding-extra-tight: #{common.$padding-extra-tight};
  --padding-tight: #{common.$padding-tight};
  --padding-main: #{common.$padding-main};
  --padding-loose: #{common.$padding-loose};
  --padding-extra-loose: #{common.$padding-extra-loose};
  --padding-super-loose: #{common.$padding-super-loose};
  --padding-ultra-loose: #{common.$padding-ultra-loose};
  --padding-spacious: #{common.$padding-spacious};
  --padding-extra-spacious: #{common.$padding-extra-spacious};
  --padding-super-spacious: #{common.$padding-super-spacious};
  --padding-ultra-spacious: #{common.$padding-ultra-spacious};

  --spacing-zero: #{common.$spacing-zero};
  --spacing-ultra-tight: #{common.$spacing-ultra-tight};
  --spacing-super-tight: #{common.$spacing-super-tight};
  --spacing-extra-tight: #{common.$spacing-extra-tight};
  --spacing-tight: #{common.$spacing-tight};
  --spacing-main: #{common.$spacing-main};
  --spacing-loose: #{common.$spacing-loose};
  --spacing-extra-loose: #{common.$spacing-extra-loose};
  --spacing-super-loose: #{common.$spacing-super-loose};
  --spacing-ultra-loose: #{common.$spacing-ultra-loose};
  --spacing-spacious: #{common.$spacing-spacious};
  --spacing-extra-spacious: #{common.$spacing-extra-spacious};
  --spacing-super-spacious: #{common.$spacing-super-spacious};
  --spacing-ultra-spacious: #{common.$spacing-ultra-spacious};

  --typography-label-font-family: #{common.$typography-label-font-family};
  --typography-label-size-main: #{common.$typography-label-size-main};
  --typography-label-size-small: #{common.$typography-label-size-small};
  --typography-label-font-weight-main: #{common.$typography-label-font-weight-main};
  --typography-label-font-weight-strong: #{common.$typography-label-font-weight-strong};

  --typography-body-font-family: #{common.$typography-body-font-family};
  --typography-body-size-small: #{common.$typography-body-size-small};
  --typography-body-size-main: #{common.$typography-body-size-main};
  --typography-body-size-large: #{common.$typography-body-size-large};
  --typography-body-font-weight-main: #{common.$typography-body-font-weight-main};
  --typography-body-font-weight-strong: #{common.$typography-body-font-weight-strong};
  --typography-body-font-weight-extra-strong: #{common.$typography-body-font-weight-extra-strong};

  --typography-title-font-family: #{common.$typography-title-font-family};
  --typography-title-size-small: #{common.$typography-title-size-small};
  --typography-title-size-main: #{common.$typography-title-size-main};
  --typography-title-size-large: #{common.$typography-title-size-large};
  --typography-title-font-weight-light: #{common.$typography-title-font-weight-light};
  --typography-title-font-weight-main: #{common.$typography-title-font-weight-main};
  --typography-title-font-weight-strong: #{common.$typography-title-font-weight-strong};

  --typography-headline-font-family: #{common.$typography-headline-font-family};
  --typography-headline-size-small: #{common.$typography-headline-size-small};
  --typography-headline-size-main: #{common.$typography-headline-size-main};
  --typography-headline-size-large: #{common.$typography-headline-size-large};
  --typography-headline-font-weight-light: #{common.$typography-headline-font-weight-light};
  --typography-headline-font-weight-main: #{common.$typography-headline-font-weight-main};
  --typography-headline-font-weight-strong: #{common.$typography-headline-font-weight-strong};

  --typography-display-font-family: #{common.$typography-display-font-family};
  --typography-display-size-small: #{common.$typography-display-size-small};
  --typography-display-size-main: #{common.$typography-display-size-main};
  --typography-display-size-large: #{common.$typography-display-size-large};
  --typography-display-font-weight: #{common.$typography-display-font-weight};
}

html.dark:root {
  --primary-1: #{dark.$primary-1};
  --primary-2: #{dark.$primary-2};
  --primary-3: #{dark.$primary-3};
  --primary-4: #{dark.$primary-4};
  --primary-5: #{dark.$primary-5};
  --primary-6: #{dark.$primary-6};
  --primary-7: #{dark.$primary-7};
  --primary-8: #{dark.$primary-8};
  --primary-9: #{dark.$primary-9};
  --primary-10: #{dark.$primary-10};
  --primary-6-rgb: #{color.channel(dark.$primary-6, 'red', $space: rgb)}, #{color.channel(dark.$primary-6, 'green', $space: rgb)}, #{color.channel(dark.$primary-6, 'blue', $space: rgb)};

  --text-main: #{dark.$text-main};
  --text-secondary: #{dark.$text-secondary};
  --text-auxiliary: #{dark.$text-auxiliary};
  --text-placeholder: #{dark.$text-placeholder-disabled};
  --text-white: #{dark.$text-white};
  --text-oppo-bg: #{dark.$text-oppo-bg};

  --icon-main: #{dark.$icon-main};
  --icon-secondary: #{dark.$icon-secondary};
  --icon-auxiliary: #{dark.$icon-auxiliary};
  --icon-placeholder: #{dark.$icon-placeholder-disabled};
  --icon-white: #{dark.$icon-white};

  --border-extra-strong: #{dark.$border-extra-Strong};
  --border-strong: #{dark.$border-Strong};
  --border-main: #{dark.$border-main};
  --border-light: #{dark.$border-light};
  --border-white: #{dark.$border-white};

  --divider-strong: #{dark.$divider-strong};
  --divider-main: #{dark.$divider-main};
  --divider-light: #{dark.$divider-light};
  --divider-white: #{dark.$divider-white};

  --filled-extra-strong: #{dark.$filled-extra-strong};
  --filled-strong: #{dark.$filled-strong};
  --filled-content: #{dark.$filled-content};
  --filled-bottom: #{dark.$filled-bottom};
  --filled-oppo: #{dark.$filled-oppo};

  --feedback-hover: #{dark.$feedback-hover};
  --feedback-active: #{dark.$feedback-active};
  --feedback-accent: #{dark.$feedback-accent};

  --opacfilled-tooltip-toast-cover: #{dark.$opacfilled-tooltip_toast_cover};
  --opacfilled-main-cover: #{dark.$opacfilled-main-cover};
  --opacfilled-light-cover: #{dark.$opacfilled-light-cover};

  --danger-main: #{dark.$danger-main};
  --danger-hover: #{dark.$danger-hover};
  --danger-clicked: #{dark.$danger-clicked};
  --danger-disabled: #{dark.$danger-disabled};
  --danger-particular: #{dark.$danger-particular};
  --danger-surface: #{dark.$danger-surface};
  --danger-main-rgb: #{color.channel(dark.$danger-main, 'red', $space: rgb)}, #{color.channel(dark.$danger-main, 'green', $space: rgb)}, #{color.channel(dark.$danger-main, 'blue', $space: rgb)};

  --success-normal: #{dark.$success-normal};
  --success-hover: #{dark.$success-hover};
  --success-clicked: #{dark.$success-clicked};
  --success-disabled: #{dark.$success-disabled};
  --success-particular: #{dark.$success-particular};
  --success-surface: #{dark.$success-surface};
  --success-normal-rgb: #{color.channel(dark.$success-normal, 'red', $space: rgb)}, #{color.channel(dark.$success-normal, 'green', $space: rgb)}, #{color.channel(dark.$success-normal, 'blue', $space: rgb)};

  --warning-normal: #{dark.$warning-normal};
  --warning-hover: #{dark.$warning-hover};
  --warning-clicked: #{dark.$warning-clicked};
  --warning-disabled: #{dark.$warning-disabled};
  --warning-particular: #{dark.$warning-particular};
  --warning-surface: #{dark.$warning-surface};
  --warning-normal-rgb: #{color.channel(dark.$warning-normal, 'red', $space: rgb)}, #{color.channel(dark.$warning-normal, 'green', $space: rgb)}, #{color.channel(dark.$warning-normal, 'blue', $space: rgb)};

  --classifyapplication-yellow-background: #{dark.$classifyapplication-yellow-background};
  --classifyapplication-yellow-border: #{dark.$classifyapplication-yellow-border};
  --classifyapplication-yellow-content: #{dark.$classifyapplication-yellow-content};
  --classifyapplication-lightblue-background: #{dark.$classifyapplication-lightblue-background};
  --classifyapplication-lightblue-border: #{dark.$classifyapplication-lightblue-border};
  --classifyapplication-lightblue-content: #{dark.$classifyapplication-lightblue-content};
  --classifyapplication-cyan-background: #{dark.$classifyapplication-cyan-background};
  --classifyapplication-cyan-border: #{dark.$classifyapplication-cyan-border};
  --classifyapplication-cyan-content: #{dark.$classifyapplication-cyan-content};
  --classifyapplication-purple-background: #{dark.$classifyapplication-purple-background};
  --classifyapplication-purple-border: #{dark.$classifyapplication-purple-border};
  --classifyapplication-purple-content: #{dark.$classifyapplication-purple-content};
  --classifyapplication-grape-background: #{dark.$classifyapplication-grape-background};
  --classifyapplication-grape-border: #{dark.$classifyapplication-grape-border};
  --classifyapplication-grape-content: #{dark.$classifyapplication-grape-content};
  --classifyapplication-pink-background: #{dark.$classifyapplication-pink-background};
  --classifyapplication-pink-border: #{dark.$classifyapplication-pink-border};
  --classifyapplication-pink-content: #{dark.$classifyapplication-pink-content};
  --classifyapplication-volcano-background: #{dark.$classifyapplication-volcano-background};
  --classifyapplication-volcano-border: #{dark.$classifyapplication-volcano-border};
  --classifyapplication-volcano-content: #{dark.$classifyapplication-volcano-content};
}