@use "config" as *;
@use "colors" as *;

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

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

  @return $result;
}

// Recursive mixin to handle nested maps
@mixin create-css-vars($map, $parent-key: "") {
  @each $key, $value in $map {
    $current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");

    @if type-of($value) == "map" {
      @include create-css-vars($value, $current-key);
    } @else {
      --#{$prefix}#{$current-key}: #{$value};
    }
  }
}
$new-theme-colors: (
  "primary": (
    "base": var(--#{$prefix}blue-500),
    "text": light-dark(var(--#{$prefix}blue-700), var(--#{$prefix}blue-300)),
    "bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
    "bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
    "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
    "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, transparent),
    "contrast": var(--#{$prefix}white)
  ),
  // "indigo": (
  //   "base": var(--#{$prefix}indigo-500),
  //   "text": light-dark(var(--#{$prefix}indigo-700), var(--#{$prefix}indigo-300)),
  //   "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
  //   "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
  //   "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
  //   "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
  //   "contrast": var(--#{$prefix}white)
  // ),
  // "purple": (
  //   "base": var(--#{$prefix}purple-500),
  //   "text": light-dark(var(--#{$prefix}purple-700), var(--#{$prefix}purple-300)),
  //   "bg": light-dark(var(--#{$prefix}purple-500), var(--#{$prefix}purple-500)),
  //   "bg-subtle": light-dark(var(--#{$prefix}purple-100), var(--#{$prefix}purple-900)),
  //   "bg-muted": light-dark(var(--#{$prefix}purple-200), var(--#{$prefix}purple-800)),
  //   "border": light-dark(var(--#{$prefix}purple-300), var(--#{$prefix}purple-600)),
  //   "contrast": var(--#{$prefix}white)
  // ),
  // "pink": (
  //   "base": var(--#{$prefix}pink-500),
  //   "text": light-dark(var(--#{$prefix}pink-700), var(--#{$prefix}pink-300)),
  //   "bg": light-dark(var(--#{$prefix}pink-500), var(--#{$prefix}pink-500)),
  //   "bg-subtle": light-dark(var(--#{$prefix}pink-100), var(--#{$prefix}pink-900)),
  //   "bg-muted": light-dark(var(--#{$prefix}pink-200), var(--#{$prefix}pink-800)),
  //   "border": light-dark(var(--#{$prefix}pink-300), var(--#{$prefix}pink-600)),
  //   "contrast": var(--#{$prefix}white)
  // ),
  "danger": (
    "base": var(--#{$prefix}red-500),
    "text": light-dark(var(--#{$prefix}red-700), var(--#{$prefix}red-300)),
    "bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
    "bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
    "bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
    "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, transparent),
    "contrast": var(--#{$prefix}white)
  ),
  // "orange": (
  //   "base": var(--#{$prefix}orange-500),
  //   "text": light-dark(var(--#{$prefix}orange-700), var(--#{$prefix}orange-300)),
  //   "bg": light-dark(var(--#{$prefix}orange-500), var(--#{$prefix}orange-500)),
  //   "bg-subtle": light-dark(var(--#{$prefix}orange-100), var(--#{$prefix}orange-900)),
  //   "bg-muted": light-dark(var(--#{$prefix}orange-200), var(--#{$prefix}orange-800)),
  //   "border": light-dark(var(--#{$prefix}orange-300), var(--#{$prefix}orange-600)),
  //   "contrast": var(--#{$prefix}gray-900)
  // ),
  "warning": (
    "base": var(--#{$prefix}yellow-500),
    "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
    "bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
    "bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
    "bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
    "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, transparent),
    "contrast": var(--#{$prefix}gray-900)
  ),
  "success": (
    "base": var(--#{$prefix}green-500),
    "text": light-dark(var(--#{$prefix}green-700), var(--#{$prefix}green-300)),
    "bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
    "bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
    "bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
    "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, transparent),
    "contrast": var(--#{$prefix}white)
  ),
  // "teal": (
  //   "base": var(--#{$prefix}teal-500),
  //   "text": light-dark(var(--#{$prefix}teal-700), var(--#{$prefix}teal-300)),
  //   "bg": light-dark(var(--#{$prefix}teal-500), var(--#{$prefix}teal-500)),
  //   "bg-subtle": light-dark(var(--#{$prefix}teal-100), var(--#{$prefix}teal-900)),
  //   "bg-muted": light-dark(var(--#{$prefix}teal-200), var(--#{$prefix}teal-800)),
  //   "border": light-dark(var(--#{$prefix}teal-300), var(--#{$prefix}teal-600)),
  //   "contrast": var(--#{$prefix}gray-900)
  // ),
  "info": (
    "base": var(--#{$prefix}cyan-500),
    "text": light-dark(var(--#{$prefix}cyan-700), var(--#{$prefix}cyan-300)),
    "bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
    "bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
    "bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
    "border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, transparent),
    "contrast": var(--#{$prefix}gray-900)
  ),
  "secondary": (
    "base": var(--#{$prefix}gray-500),
    "text": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
    "bg": light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-500)),
    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
    "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, transparent),
    "contrast": var(--#{$prefix}gray-900)
  )
) !default;


// [class^=".bg-"]: background-color: var(--bs-bg-color);
// .bg-primary: --bs-bg-color: var(--#{$prefix}primary-bg);
// .bg-10: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 10%, transparent);
// .bg-20: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 20%, transparent);
// .bg-30: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 30%, transparent);
// .bg-40: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 40%, transparent);
// .bg-50: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 50%, transparent);
// .bg-60: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 60%, transparent);
// .bg-70: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 70%, transparent);
// .bg-80: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 80%, transparent);
// .bg-90: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 90%, transparent);
// .bg-100: background-color: var(--#{$prefix}bg-color);

// [class^=".text-"]: color: var(--bs-text-color);
// .text-primary: --bs-text-color: var(--#{$prefix}primary-text);
// .text-10: color: color-mix(in oklch, var(--#{$prefix}text-color) 10%, transparent);
// .text-20: color: color-mix(in oklch, var(--#{$prefix}text-color) 20%, transparent);
// .text-30: color: color-mix(in oklch, var(--#{$prefix}text-color) 30%, transparent);
// .text-40: color: color-mix(in oklch, var(--#{$prefix}text-color) 40%, transparent);
// .text-50: color: color-mix(in oklch, var(--#{$prefix}text-color) 50%, transparent);
// .text-60: color: color-mix(in oklch, var(--#{$prefix}text-color) 60%, transparent);
// .text-70: color: color-mix(in oklch, var(--#{$prefix}text-color) 70%, transparent);
// .text-80: color: color-mix(in oklch, var(--#{$prefix}text-color) 80%, transparent);
// .text-90: color: color-mix(in oklch, var(--#{$prefix}text-color) 90%, transparent);
// .text-100: color: var(--#{$prefix}text-color);

$color-bg: (
  "body": var(--#{$prefix}body-bg),
  "secondary": var(--#{$prefix}body-secondary-bg),
  "tertiary": var(--#{$prefix}body-tertiary-bg),
) !default;

$color-text: (
  "body": var(--#{$prefix}body-color),
  "secondary": var(--#{$prefix}body-secondary-color),
  "tertiary": var(--#{$prefix}body-tertiary-color),
) !default;

$color-border: (
  //...
) !default;

$util-opacity: (
  "10": 0.1,
  "20": 0.2,
  "30": 0.3,
  "40": 0.4,
  "50": 0.5,
  "60": 0.6,
  "70": 0.7,
  "80": 0.8,
  "90": 0.9,
  "100": 1
) !default;