@use 'sass:map';
@use 'sass:meta';

@use '../config' as *;

:root {
  // Note: Custom variable values only support SassScript inside `#{}`.

  // Colors
  //
  // Generate palettes for full colors, grays, and theme colors.

  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $grays {
    --gray-#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  // $theme-colors-*-dark maps are only populated when $enable-dark-mode is true (see _maps.scss)
  @if $enable-dark-mode {
    @each $color, $value in $theme-colors-text {
      --#{$color}-text-emphasis: light-dark(#{$value}, #{map.get($theme-colors-text-dark, $color)});
    }

    @each $color, $value in $theme-colors-bg-subtle {
      --#{$color}-bg-subtle: light-dark(#{$value}, #{map.get($theme-colors-bg-subtle-dark, $color)});
    }

    @each $color, $value in $theme-colors-border-subtle {
      --#{$color}-border-subtle: light-dark(#{$value}, #{map.get($theme-colors-border-subtle-dark, $color)});
    }
  } @else {
    @each $color, $value in $theme-colors-text {
      --#{$color}-text-emphasis: #{$value};
    }

    @each $color, $value in $theme-colors-bg-subtle {
      --#{$color}-bg-subtle: #{$value};
    }

    @each $color, $value in $theme-colors-border-subtle {
      --#{$color}-border-subtle: #{$value};
    }
  }

  // Fonts

  // Note: Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-sans-serif: #{meta.inspect($font-family-sans-serif)};
  --font-monospace: #{meta.inspect($font-family-monospace)};
  --gradient: #{$gradient};

  // Root and body
  // scss-docs-start root-body-variables
  @if $font-size-root != null {
    --root-font-size: #{$font-size-root};
  }
  --body-font-family: #{meta.inspect($font-family-base)};
  @include rfs($font-size-base, --body-font-size);
  --body-font-weight: #{$font-weight-base};
  --body-line-height: #{$line-height-base};
  --body-text-align: #{$body-text-align};

  --body-color: light-dark(#{$body-color}, #{$body-color-dark});
  --body-bg: light-dark(#{$body-bg}, #{$body-bg-dark});

  --emphasis-color: light-dark(#{$body-emphasis-color}, #{$body-emphasis-color-dark});

  --secondary-color: light-dark(#{$body-secondary-color}, #{$body-secondary-color-dark});
  --secondary-bg: light-dark(#{$body-secondary-bg}, #{$body-secondary-bg-dark});

  --tertiary-color: light-dark(#{$body-tertiary-color}, #{$body-tertiary-color-dark});
  --tertiary-bg: light-dark(#{$body-tertiary-bg}, #{$body-tertiary-bg-dark});
  // scss-docs-end root-body-variables

  --link-color: light-dark(#{$link-color}, #{$link-color-dark});
  --link-decoration: #{$link-decoration};

  --link-hover-color: light-dark(#{$link-hover-color}, #{$link-hover-color-dark});

  @if $link-hover-decoration != null {
    --link-hover-decoration: #{$link-hover-decoration};
  }

  // $code-color is itself light-dark(gray-600, gray-400); layout/_root.scss re-declares
  // --code-color afterwards and is the one that actually wins in the compiled cascade.
  --code-color: #{$code-color};
  --highlight-color: light-dark(#{$mark-color}, #{$mark-color-dark});
  --highlight-bg: light-dark(#{$mark-bg}, #{$mark-bg-dark});

  // scss-docs-start root-border-var
  --border-width: #{$border-width};
  --border-style: #{$border-style};
  --border-color: light-dark(#{$border-color}, #{$border-color-dark});
  --border-color-translucent: light-dark(#{$border-color-translucent}, #{$border-color-translucent-dark});
  // scss-docs-end root-border-var

  --box-shadow: #{$box-shadow};
  --box-shadow-sm: #{$box-shadow-sm};
  --box-shadow-lg: #{$box-shadow-lg};
  --box-shadow-inset: #{$box-shadow-inset};

  // Focus styles
  // scss-docs-start root-focus-variables
  --focus-ring-width: #{$focus-ring-width};
  --focus-ring-offset: #{$focus-ring-offset};
  --focus-ring-opacity: #{$focus-ring-opacity};
  --focus-ring-opacity-dark: #{$focus-ring-opacity-dark};
  --focus-ring-color: #{$focus-ring-color};
  // scss-docs-end root-focus-variables

  // scss-docs-start root-form-validation-variables
  --form-valid-color: light-dark(#{$form-valid-color}, #{$form-valid-color-dark});
  --form-valid-border-color: light-dark(#{$form-valid-border-color}, #{$form-valid-border-color-dark});
  --form-invalid-color: light-dark(#{$form-invalid-color}, #{$form-invalid-color-dark});
  --form-invalid-border-color: light-dark(#{$form-invalid-border-color}, #{$form-invalid-border-color-dark});
  // scss-docs-end root-form-validation-variables
}

:root,
[data-bs-theme='light'],
[data-theme='light'] {
  --heading-color: #{$headings-color};
}

@if $enable-dark-mode {
  @include color-mode(dark, true) {
    // scss-docs-start root-dark-mode-vars
    // Non-color overrides can't be expressed inside light-dark(), so they stay here.

    --heading-color: #{$headings-color-dark};

    // scss-docs-end root-dark-mode-vars
  }
}