@use "sass:map";
@use "colors" as *;
@use "config" as *;
@use "functions" as *;
@use "theme" as *;
@use "mixins/tokens" as *;
@use "forms/form-variables" as *;

// mdo-do: do we need theme?
@layer colors, theme, config, root, reboot, layout, content, forms, components, custom, helpers, utilities;

$root-tokens: () !default;

// scss-docs-start root-tokens
// stylelint-disable @stylistic/value-list-max-empty-lines, @stylistic/function-max-empty-lines
// stylelint-disable-next-line scss/dollar-variable-default
$root-tokens: defaults(
  (
    --black: #{$black},
    --white: #{$white},

    --gradient: #{$gradient},

    // scss-docs-start root-font-weight-variables
    --font-weight-lighter: lighter,
    --font-weight-light: 300,
    --font-weight-normal: 400,
    --font-weight-medium: 500,
    --font-weight-semibold: 600,
    --font-weight-bold: 700,
    --font-weight-bolder: bolder,
    // scss-docs-end root-font-weight-variables

    // scss-docs-start root-body-variables
    --body-font-family: system-ui,
    --body-font-size: var(--font-size-base),
    --body-font-weight: #{$font-weight-base},
    --body-line-height: #{$line-height-base},

    --heading-color: #{$headings-color},

    --hr-border-color: var(--border-color),

    --link-color: light-dark(var(--primary-base), var(--primary-fg)),
    --link-decoration: #{$link-decoration},
    --link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000),

    --font-mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
    --code-font-size: 95%,
    --code-color: var(--fg-2),

    // scss-docs-start root-border-var
    --border-width: #{$border-width},
    --border-style: #{$border-style},
    --border-color: light-dark(color-mix(in oklch, var(--gray-100), var(--gray-200)), var(--gray-700)),
    --border-color-translucent: color-mix(in oklch, var(--fg-body) 15%, transparent),
    // scss-docs-end root-border-var

    // scss-docs-start root-border-radius-var
    --border-radius: .5rem,
    --border-radius-xs: .375rem,
    --border-radius-sm: .5rem,
    --border-radius-lg: .75rem,
    --border-radius-xl: 1rem,
    --border-radius-2xl: 2rem,
    --border-radius-pill: 50rem,
    // scss-docs-end root-border-radius-var

    // scss-docs-start root-box-shadow-variables
    --box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%),
    --box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%),
    --box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%),
    --box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%),
    // scss-docs-end root-box-shadow-variables

    --spacer: 1rem,

    // scss-docs-start root-focus-variables
    --focus-ring-width: 3px,
    --focus-ring-offset: 1px,
    --focus-ring-color: var(--primary-focus-ring),
    --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color),
    // scss-docs-end root-focus-variables

    // scss-docs-start root-form-variables
    --control-checked-bg: var(--primary-base),
    --control-checked-border-color: var(--control-checked-bg),
    --control-active-bg: var(--primary-base),
    --control-active-border-color: var(--control-active-bg),
    --control-disabled-bg: var(--bg-3),
    --control-disabled-opacity: .65,

    --btn-input-fg: var(--fg-body),
    --btn-input-bg: var(--bg-body),

    --btn-input-min-height: 2.375rem,
    --btn-input-padding-y: .375rem,
    --btn-input-padding-x: .75rem,
    --btn-input-font-size: var(--font-size-base),
    --btn-input-line-height: var(--line-height-base),
    --btn-input-border-radius: var(--border-radius),

    --btn-input-xs-min-height: 1.5rem,
    --btn-input-xs-padding-y: .125rem,
    --btn-input-xs-padding-x: .5rem,
    --btn-input-xs-font-size: var(--font-size-xs),
    --btn-input-xs-line-height: 1.125,
    --btn-input-xs-border-radius: var(--border-radius-xs),

    --btn-input-sm-min-height: 2rem,
    --btn-input-sm-padding-y: .25rem,
    --btn-input-sm-padding-x: .625rem,
    --btn-input-sm-font-size: var(--font-size-sm),
    --btn-input-sm-line-height: var(--line-height-sm),
    --btn-input-sm-border-radius: var(--border-radius-sm),

    --btn-input-lg-min-height: 2.75rem,
    --btn-input-lg-padding-y: .5rem,
    --btn-input-lg-padding-x: 1rem,
    --btn-input-lg-font-size: var(--font-size-md),
    --btn-input-lg-line-height: var(--line-height-md),
    --btn-input-lg-border-radius: var(--border-radius-lg),
    // scss-docs-end root-form-variables

    // scss-docs-start root-form-validation-variables
    --form-valid-color: #{$form-valid-color},
    --form-valid-border-color: #{$form-valid-border-color},
    --form-invalid-color: #{$form-invalid-color},
    --form-invalid-border-color: #{$form-invalid-border-color},
    // scss-docs-end root-form-validation-variables
  ),
  $root-tokens
);
// stylelint-enable @stylistic/value-list-max-empty-lines, @stylistic/function-max-empty-lines
// scss-docs-end root-tokens

// scss-docs-start root-font-size-loop
// Generate font-size and line-height tokens
@each $name, $props in $font-sizes {
  $root-tokens: map.set($root-tokens, --font-size-#{$name}, map.get($props, "font-size"));
  $root-tokens: map.set($root-tokens, --line-height-#{$name}, map.get($props, "line-height"));
}
// scss-docs-end root-font-size-loop

// scss-docs-start root-theme-tokens
// Generate semantic theme colors
@each $color-name, $color-map in $theme-colors {
  @each $key, $value in $color-map {
    $root-tokens: map.set($root-tokens, --#{$color-name}-#{$key}, $value);
  }
}

// Generate background tokens
@each $key, $value in $theme-bgs {
  $root-tokens: map.set($root-tokens, --bg-#{$key}, $value);
}

// Generate foreground tokens
@each $key, $value in $theme-fgs {
  $root-tokens: map.set($root-tokens, --fg-#{$key}, $value);
}

// Generate border tokens
@each $key, $value in $theme-borders {
  $root-tokens: map.set($root-tokens, --border-#{$key}, $value);
}
// scss-docs-end root-theme-tokens

// Generate breakpoint tokens
@each $name, $value in $breakpoints {
  $root-tokens: map.set($root-tokens, --breakpoint-#{$name}, $value);
}

:root {
  @include tokens($root-tokens);

  color-scheme: light dark;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
}

[data-bs-theme="light"] {
  color-scheme: light;
}