@use "sass:map";

@function theme-color-values($key) {
  $result: ();

  @each $color-name, $color-map in $theme-colors {
    @if map.has-key($color-map, $key) {
      $result: map.merge($result, ($color-name: map.get($color-map, $key)));
    }
  }

  @return $result;
}

// Themes map sub-keys
//
// Return var() references to root tokens instead of raw values.
// Ex: theme-color-refs("bg") => (primary: var(--primary-bg), accent: var(--accent-bg), ...)
@function theme-color-refs($key) {
  $result: ();

  @each $color-name, $color-map in $theme-colors {
    @if map.has-key($color-map, $key) {
      $result: map.merge($result, ($color-name: var(--#{$color-name}-#{$key})));
    }
  }

  @return $result;
}

// Theme token to root tokens
//
// Returns the global :root token reference for a given a given token map, prefix, and key.
// Ex: theme-token-refs($theme-bgs, "bg") => (body: var(--bg-body), 1: var(--bg-1), ...)
// Skips `inherit` since it's a CSS-wide keyword that can't be stored in a custom property.
@function theme-token-refs($map, $prefix) {
  $result: ();

  @each $key, $value in $map {
    @if $value != inherit {
      $result: map.merge($result, ($key: var(--#{$prefix}-#{$key})));
    }
  }

  @return $result;
}

// Generate opacity values using color-mix()
@function theme-opacity-values($color-var, $opacities: $util-opacity) {
  $result: ();

  @each $key, $value in $opacities {
    @if $key == 100 {
      // For 100%, use direct variable reference (more efficient)
      $result: map.merge($result, ($key: var($color-var)));
    } @else {
      // For other values, use color-mix()
      $percentage: $key * 1%;
      $result: map.merge($result, ($key: color-mix(in oklch, var($color-var) $percentage, transparent)));
    }
  }

  @return $result;
}

// Generate theme classes dynamically based on the keys in each theme color map
@mixin generate-theme-classes() {
  @each $color-name, $color-map in $theme-colors {
    .theme-#{$color-name} {
      @each $key, $value in $color-map {
        --theme-#{$key}: var(--#{$color-name}-#{$key});
      }
    }
  }
}

// scss-docs-start theme-colors
$theme-colors: (
  "primary": (
    "base": var(--blue-500),
    "fg": light-dark(var(--blue-600), var(--blue-400)),
    "fg-emphasis": light-dark(var(--blue-800), var(--blue-200)),
    "bg": var(--blue-500),
    "bg-subtle": light-dark(var(--blue-100), var(--blue-900)),
    "bg-muted": light-dark(var(--blue-200), var(--blue-800)),
    "border": light-dark(var(--blue-300), var(--blue-600)),
    "focus-ring": light-dark(color-mix(in oklch, var(--blue-500) 50%, var(--bg-body)), color-mix(in oklch, var(--blue-500) 75%, var(--bg-body))),
    "contrast": var(--white)
  ),
  "accent": (
    "base": var(--indigo-500),
    "fg": light-dark(var(--indigo-600), color-mix(in oklch, var(--indigo-400), var(--indigo-300))),
    "fg-emphasis": light-dark(var(--indigo-800), var(--indigo-300)),
    "bg": var(--indigo-500),
    "bg-subtle": light-dark(var(--indigo-100), var(--indigo-900)),
    "bg-muted": light-dark(var(--indigo-200), var(--indigo-800)),
    "border": light-dark(var(--indigo-300), var(--indigo-600)),
    "focus-ring": light-dark(color-mix(in oklch, var(--indigo-500) 50%, var(--bg-body)), color-mix(in oklch, var(--indigo-500) 75%, var(--bg-body))),
    "contrast": var(--white)
  ),
  "success": (
    "base": var(--green-500),
    "fg": light-dark(var(--green-600), var(--green-400)),
    "fg-emphasis": light-dark(var(--green-800), var(--green-300)),
    "bg": var(--green-500),
    "bg-subtle": light-dark(var(--green-100), var(--green-900)),
    "bg-muted": light-dark(var(--green-200), var(--green-800)),
    "border": light-dark(var(--green-300), var(--green-600)),
    "focus-ring": light-dark(color-mix(in oklch, var(--green-500) 50%, var(--bg-body)), color-mix(in oklch, var(--green-500) 75%, var(--bg-body))),
    "contrast": var(--white)
  ),
  "danger": (
    "base": var(--red-500),
    "fg": light-dark(var(--red-600), var(--red-400)),
    "fg-emphasis": light-dark(var(--red-800), var(--red-300)),
    "bg": var(--red-500),
    "bg-subtle": light-dark(var(--red-100), var(--red-900)),
    "bg-muted": light-dark(var(--red-200), var(--red-800)),
    "border": light-dark(var(--red-300), var(--red-600)),
    "focus-ring": light-dark(color-mix(in oklch, var(--red-500) 50%, var(--bg-body)), color-mix(in oklch, var(--red-500) 75%, var(--bg-body))),
    "contrast": var(--white)
  ),
  "warning": (
    "base": var(--yellow-500),
    "fg": light-dark(var(--yellow-700), var(--yellow-400)),
    "fg-emphasis": light-dark(var(--yellow-800), var(--yellow-300)),
    "bg": var(--yellow-500),
    "bg-subtle": light-dark(var(--yellow-100), var(--yellow-900)),
    "bg-muted": light-dark(var(--yellow-200), var(--yellow-800)),
    "border": light-dark(var(--yellow-300), var(--yellow-600)),
    "focus-ring": light-dark(color-mix(in oklch, var(--yellow-500) 50%, var(--bg-body)), color-mix(in oklch, var(--yellow-400) 85%, var(--bg-body))),
    "contrast": var(--gray-900)
  ),
  "info": (
    "base": var(--cyan-500),
    "fg": light-dark(var(--cyan-600), var(--cyan-400)),
    "fg-emphasis": light-dark(var(--cyan-800), var(--cyan-300)),
    "bg": var(--cyan-500),
    "bg-subtle": light-dark(var(--cyan-100), var(--cyan-900)),
    "bg-muted": light-dark(var(--cyan-200), var(--cyan-800)),
    "border": light-dark(var(--cyan-300), var(--cyan-600)),
    "focus-ring": light-dark(color-mix(in oklch, var(--cyan-500) 50%, var(--bg-body)), color-mix(in oklch, var(--cyan-500) 75%, var(--bg-body))),
    "contrast": var(--gray-900)
  ),
  "inverse": (
    "base": var(--gray-900),
    "fg": light-dark(var(--gray-900), var(--gray-200)),
    "fg-emphasis": light-dark(var(--gray-975), var(--white)),
    "bg": light-dark(var(--gray-900), var(--gray-025)),
    "bg-subtle": light-dark(var(--gray-100), var(--gray-900)),
    "bg-muted": light-dark(var(--gray-200), var(--gray-300)),
    "border": light-dark(var(--gray-400), var(--gray-100)),
    "focus-ring": color-mix(in oklch, light-dark(var(--gray-900), var(--gray-100)) 50%, var(--bg-body)),
    "contrast": light-dark(var(--white), var(--gray-900))
  ),
  "secondary": (
    "base": var(--gray-200),
    "fg": light-dark(var(--gray-600), var(--gray-400)),
    "fg-emphasis": light-dark(var(--gray-800), var(--gray-200)),
    "bg": light-dark(var(--gray-100), var(--gray-600)),
    "bg-subtle": light-dark(var(--gray-050), var(--gray-800)),
    "bg-muted": light-dark(var(--gray-100), var(--gray-700)),
    "border": light-dark(var(--gray-300), var(--gray-600)),
    "focus-ring": color-mix(in oklch, light-dark(var(--gray-500), var(--gray-300)) 50%, var(--bg-body)),
    "contrast": light-dark(var(--gray-900), var(--white))
  )
) !default;
// scss-docs-end theme-colors

// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
$theme-bgs: (
  "body": light-dark(var(--white), var(--gray-975)),
  "1": light-dark(var(--gray-025), var(--gray-950)),
  "2": light-dark(var(--gray-050), var(--gray-900)),
  "3": light-dark(var(--gray-100), var(--gray-800)),
  "4": light-dark(var(--gray-200), var(--gray-700)),
  "white": var(--white),
  "black": var(--black),
  "transparent": transparent,
  "inherit": inherit,
) !default;

$theme-fgs: (
  "body": light-dark(var(--gray-900), var(--gray-050)),
  "1": light-dark(var(--gray-800), var(--gray-200)),
  "2": light-dark(var(--gray-700), var(--gray-300)),
  "3": light-dark(var(--gray-600), var(--gray-500)),
  "4": light-dark(var(--gray-500), var(--gray-600)),
  "white": var(--white),
  "black": var(--black),
  "inherit": inherit,
) !default;

$theme-borders: (
  "bg": var(--bg-body),
  "body": light-dark(var(--gray-300), var(--gray-800)),
  "muted": light-dark(var(--gray-200), var(--gray-800)),
  "subtle": light-dark(var(--gray-100), var(--gray-900)),
  "emphasized": light-dark(var(--gray-400), var(--gray-600)),
  "white": var(--white),
  "black": var(--black),
) !default;

$util-opacity: (
  10: .1,
  20: .2,
  30: .3,
  40: .4,
  50: .5,
  60: .6,
  70: .7,
  80: .8,
  90: .9,
  100: 1
) !default;