/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.0 Variables
Use for computed variables or any
not meant to be set by system users
directly.
----------------------------------------
*/

/*
----------------------------------------
Touch target size
----------------------------------------
*/

$size-touch-target: 6; // 48px to meet WCAG minimum of 44px

/*
----------------------------------------
Namespace
----------------------------------------
*/

$ns-utility: ns("utility");
$ns-grid: ns("grid");

/*
----------------------------------------
Separator
----------------------------------------
*/

$separator: $theme-prefix-separator;

/*
----------------------------------------
Spacing
----------------------------------------
All spacing values that can be called
by units()
----------------------------------------
*/

$project-spacing-standard: map-collect(
  map-get($system-spacing, smaller),
  map-get($system-spacing, small),
  map-get($system-spacing, smaller-negative),
  map-get($system-spacing, small-negative),
  map-get($system-spacing, medium),
  map-get($system-spacing, medium-negative),
  map-get($system-spacing, large),
  map-get($system-spacing, larger),
  map-get($system-spacing, largest),
  map-get($system-spacing, special)
);

$project-spacing-named: map-collect(
  map-get($system-spacing, large),
  map-get($system-spacing, larger),
  map-get($system-spacing, largest)
);

$spacing-to-token: (
  "0": 0,
  "1": "1px",
  "2": "2px",
  "4": "05",
  "8": 1,
  "12": "105",
  "16": 2,
  "20": "205",
  "24": 3,
  "32": 4,
  "40": 5,
  "48": 6,
  "56": 7,
  "64": 8,
  "72": 9,
);

$spacing-to-value: (
  0: 0,
  "2px": 2,
  "05": 4,
  1: 8,
  "105": 12,
  2: 16,
  3: 24,
  4: 32,
  5: 40,
  6: 48,
  7: 56,
  8: 64,
  9: 72,
);

$number-to-value: (
  "1px": "1px",
  "2px": "2px",
  "0": 0,
  "1": 1,
  "2": 2,
  "3": 3,
  "4": 4,
  "5": 5,
  "6": 6,
  "7": 7,
  "8": 8,
  "9": 9,
  "10": 10,
  "15": 15,
  "0.5": "05",
  ".5": "05",
  "1.5": "105",
  "2.5": "205",
  "-1px": "neg-1px",
  "-2px": "neg-2px",
  "-0.5": "neg-05",
  "-.5": "neg-05",
  "-1": "neg-1",
  "-1.5": "neg-105",
  "-2": "neg-2",
  "-2.5": "neg-205",
  "-3": "neg-3",
  "-4": "neg-4",
  "-5": "neg-5",
  "-6": "neg-6",
  "-7": "neg-7",
  "-8": "neg-8",
  "-9": "neg-9",
);

/*
----------------------------------------
Project fonts
----------------------------------------
Collects font settings in a map for
looping.
----------------------------------------
*/

$project-font-type-tokens: (
  "cond": (
    "typeface-token": $theme-font-type-cond,
    "custom-stack": $theme-font-cond-custom-stack,
    "src": $theme-font-cond-custom-src,
  ),
  "icon": (
    "typeface-token": $theme-font-type-icon,
    "custom-stack": $theme-font-icon-custom-stack,
    "src": $theme-font-icon-custom-src,
  ),
  "lang": (
    "typeface-token": $theme-font-type-lang,
    "custom-stack": $theme-font-lang-custom-stack,
    "src": $theme-font-lang-custom-src,
  ),
  "mono": (
    "typeface-token": $theme-font-type-mono,
    "custom-stack": $theme-font-mono-custom-stack,
    "src": $theme-font-mono-custom-src,
  ),
  "sans": (
    "typeface-token": $theme-font-type-sans,
    "custom-stack": $theme-font-sans-custom-stack,
    "src": $theme-font-sans-custom-src,
  ),
  "serif": (
    "typeface-token": $theme-font-type-serif,
    "custom-stack": $theme-font-serif-custom-stack,
    "src": $theme-font-serif-custom-src,
  ),
);

$project-font-role-tokens: (
  "ui": $theme-font-role-ui,
  "heading": $theme-font-role-heading,
  "body": $theme-font-role-body,
  "code": $theme-font-role-code,
  "alt": $theme-font-role-alt,
);

/*
----------------------------------------
Font stack
----------------------------------------
Compute the project font stack based on
the project fonts and the font
definition values set in
core/_font-definitions
----------------------------------------
*/

$project-font-stacks: (
  "cond": get-font-stack("cond"),
  "icon": get-font-stack("icon"),
  "lang": get-font-stack("lang"),
  "mono": get-font-stack("mono"),
  "sans": get-font-stack("sans"),
  "serif": get-font-stack("serif"),
  "ui": get-font-stack("ui"),
  "heading": get-font-stack("heading"),
  "body": get-font-stack("body"),
  "code": get-font-stack("code"),
  "alt": get-font-stack("alt"),
);

$project-font-stack-cond: get-font-stack("cond");
$project-font-stack-icon: get-font-stack("icon");
$project-font-stack-lang: get-font-stack("lang");
$project-font-stack-mono: get-font-stack("mono");
$project-font-stack-sans: get-font-stack("sans");
$project-font-stack-serif: get-font-stack("serif");
$project-font-stack-ui: get-font-stack("ui");
$project-font-stack-heading: get-font-stack("heading");
$project-font-stack-body: get-font-stack("body");
$project-font-stack-code: get-font-stack("code");
$project-font-stack-alt: get-font-stack("alt");

$project-font-cond: get-typeface-token("cond");
$project-font-icon: get-typeface-token("icon");
$project-font-lang: get-typeface-token("lang");
$project-font-mono: get-typeface-token("mono");
$project-font-sans: get-typeface-token("sans");
$project-font-serif: get-typeface-token("serif");
$project-font-ui: get-typeface-token("ui");
$project-font-heading: get-typeface-token("heading");
$project-font-body: get-typeface-token("body");
$project-font-code: get-typeface-token("code");
$project-font-alt: get-typeface-token("alt");

/*
----------------------------------------
Cap heights
----------------------------------------
Collect project cap heights
----------------------------------------
*/

$project-cap-heights: (
  "base": $system-base-cap-height,
  "cond": cap-height($project-font-cond),
  "icon": cap-height($project-font-icon),
  "lang": cap-height($project-font-lang),
  "mono": cap-height($project-font-mono),
  "sans": cap-height($project-font-sans),
  "serif": cap-height($project-font-serif),
  "ui": cap-height($project-font-ui),
  "heading": cap-height($project-font-heading),
  "body": cap-height($project-font-body),
  "code": cap-height($project-font-code),
  "alt": cap-height($project-font-alt),
);

$project-font-weights: (
  "thin": $theme-font-weight-thin,
  "light": $theme-font-weight-light,
  "normal": $theme-font-weight-normal,
  "medium": $theme-font-weight-medium,
  "semibold": $theme-font-weight-semibold,
  "bold": $theme-font-weight-bold,
  "heavy": $theme-font-weight-heavy,
);

/*
----------------------------------------
Theme color families and grades
----------------------------------------
*/

$uswds-color-families: (
  "primary",
  "secondary",
  "accent",
  "base",
  "warning",
  "error",
  "success",
  "info"
);

$uswds-color-theme-grades: (
  "lightest",
  "lighter",
  "light",
  "default",
  "dark",
  "darker",
  "darkest"
);

/*
----------------------------------------
Theme color map
----------------------------------------
*/

$project-colors: (
  "base": (
    "lightest": color($theme-color-base-lightest, set-theme),
    "lighter": color($theme-color-base-lighter, set-theme),
    "light": color($theme-color-base-light, set-theme),
    "default": color($theme-color-base, set-theme),
    "dark": color($theme-color-base-dark, set-theme),
    "darker": color($theme-color-base-darker, set-theme),
    "darkest": color($theme-color-base-darkest, set-theme),
  ),
  "primary": (
    "lightest": color($theme-color-primary-lightest, set-theme),
    "lighter": color($theme-color-primary-lighter, set-theme),
    "light": color($theme-color-primary-light, set-theme),
    "default": color($theme-color-primary, set-theme),
    "vivid": color($theme-color-primary-vivid, set-theme),
    "dark": color($theme-color-primary-dark, set-theme),
    "darker": color($theme-color-primary-darker, set-theme),
    "darkest": color($theme-color-primary-darkest, set-theme),
  ),
  "secondary": (
    "lightest": color($theme-color-secondary-lightest, set-theme),
    "lighter": color($theme-color-secondary-lighter, set-theme),
    "light": color($theme-color-secondary-light, set-theme),
    "default": color($theme-color-secondary, set-theme),
    "vivid": color($theme-color-secondary-vivid, set-theme),
    "dark": color($theme-color-secondary-dark, set-theme),
    "darker": color($theme-color-secondary-darker, set-theme),
    "darkest": color($theme-color-secondary-darkest, set-theme),
  ),
  "accent-warm": (
    "lightest": color($theme-color-accent-warm-lightest, set-theme),
    "lighter": color($theme-color-accent-warm-lighter, set-theme),
    "light": color($theme-color-accent-warm-light, set-theme),
    "default": color($theme-color-accent-warm, set-theme),
    "dark": color($theme-color-accent-warm-dark, set-theme),
    "darker": color($theme-color-accent-warm-darker, set-theme),
    "darkest": color($theme-color-accent-warm-darkest, set-theme),
  ),
  "accent-cool": (
    "lightest": color($theme-color-accent-cool-lightest, set-theme),
    "lighter": color($theme-color-accent-cool-lighter, set-theme),
    "light": color($theme-color-accent-cool-light, set-theme),
    "default": color($theme-color-accent-cool, set-theme),
    "dark": color($theme-color-accent-cool-dark, set-theme),
    "darker": color($theme-color-accent-cool-darker, set-theme),
    "darkest": color($theme-color-accent-cool-darkest, set-theme),
  ),
);

$project-state-colors: (
  "error": (
    "lighter": color($theme-color-error-lighter, set-theme),
    "light": color($theme-color-error-light, set-theme),
    "default": color($theme-color-error, set-theme),
    "dark": color($theme-color-error-dark, set-theme),
    "darker": color($theme-color-error-darker, set-theme),
  ),
  "warning": (
    "lighter": color($theme-color-warning-lighter, set-theme),
    "light": color($theme-color-warning-light, set-theme),
    "default": color($theme-color-warning, set-theme),
    "dark": color($theme-color-warning-dark, set-theme),
    "darker": color($theme-color-warning-darker, set-theme),
  ),
  "success": (
    "lighter": color($theme-color-success-lighter, set-theme),
    "light": color($theme-color-success-light, set-theme),
    "default": color($theme-color-success, set-theme),
    "dark": color($theme-color-success-dark, set-theme),
    "darker": color($theme-color-success-darker, set-theme),
  ),
  "info": (
    "lighter": color($theme-color-info-lighter, set-theme),
    "light": color($theme-color-info-light, set-theme),
    "default": color($theme-color-info, set-theme),
    "dark": color($theme-color-info-dark, set-theme),
    "darker": color($theme-color-info-darker, set-theme),
  ),
  "disabled": (
    "light": color($theme-color-disabled-light, set-theme),
    "default": color($theme-color-disabled, set-theme),
    "dark": color($theme-color-disabled-dark, set-theme),
  ),
  "emergency": (
    "default": color($theme-color-emergency, set-theme),
    "dark": color($theme-color-emergency-dark, set-theme),
  ),
);

$all-project-colors: map-collect($project-colors, $project-state-colors);

$palette-colors: map-collect(
  $all-project-colors,
  $tokens-color-required,
  $system-colors
);

/*
----------------------------------------
Theme color shortcodes
----------------------------------------
*/

$assignments-theme-color: (
  "base-lightest": $theme-color-base-lightest,
  "base-lighter": $theme-color-base-lighter,
  "base-light": $theme-color-base-light,
  "base": $theme-color-base,
  "base-dark": $theme-color-base-dark,
  "base-darker": $theme-color-base-darker,
  "base-darkest": $theme-color-base-darkest,
  "ink": $theme-color-base-ink,
  "primary-lightest": $theme-color-primary-lightest,
  "primary-lighter": $theme-color-primary-lighter,
  "primary-light": $theme-color-primary-light,
  "primary": $theme-color-primary,
  "primary-vivid": $theme-color-primary-vivid,
  "primary-dark": $theme-color-primary-dark,
  "primary-darker": $theme-color-primary-darker,
  "primary-darkest": $theme-color-primary-darkest,
  "secondary-lightest": $theme-color-secondary-lightest,
  "secondary-lighter": $theme-color-secondary-lighter,
  "secondary-light": $theme-color-secondary-light,
  "secondary": $theme-color-secondary,
  "secondary-vivid": $theme-color-secondary-vivid,
  "secondary-dark": $theme-color-secondary-dark,
  "secondary-darker": $theme-color-secondary-darker,
  "secondary-darkest": $theme-color-secondary-darkest,
  "accent-warm-darkest": $theme-color-accent-warm-darkest,
  "accent-warm-darker": $theme-color-accent-warm-darker,
  "accent-warm-dark": $theme-color-accent-warm-dark,
  "accent-warm": $theme-color-accent-warm,
  "accent-warm-light": $theme-color-accent-warm-light,
  "accent-warm-lighter": $theme-color-accent-warm-lighter,
  "accent-warm-lightest": $theme-color-accent-warm-lightest,
  "accent-cool-darkest": $theme-color-accent-cool-darkest,
  "accent-cool-darker": $theme-color-accent-cool-darker,
  "accent-cool-dark": $theme-color-accent-cool-dark,
  "accent-cool": $theme-color-accent-cool,
  "accent-cool-light": $theme-color-accent-cool-light,
  "accent-cool-lighter": $theme-color-accent-cool-lighter,
  "accent-cool-lightest": $theme-color-accent-cool-lightest,
  "error-lighter": $theme-color-error-lighter,
  "error-light": $theme-color-error-light,
  "error": $theme-color-error,
  "error-dark": $theme-color-error-dark,
  "error-darker": $theme-color-error-darker,
  "warning-lighter": $theme-color-warning-lighter,
  "warning-light": $theme-color-warning-light,
  "warning": $theme-color-warning,
  "warning-dark": $theme-color-warning-dark,
  "warning-darker": $theme-color-warning-darker,
  "success-lighter": $theme-color-success-lighter,
  "success-light": $theme-color-success-light,
  "success": $theme-color-success,
  "success-dark": $theme-color-success-dark,
  "success-darker": $theme-color-success-darker,
  "info-lighter": $theme-color-info-lighter,
  "info-light": $theme-color-info-light,
  "info": $theme-color-info,
  "info-dark": $theme-color-info-dark,
  "info-darker": $theme-color-info-darker,
  "disabled-light": $theme-color-disabled-light,
  "disabled": $theme-color-disabled,
  "disabled-dark": $theme-color-disabled-dark,
  "emergency": $theme-color-emergency,
  "emergency-dark": $theme-color-emergency-dark,
);

$tokens-color-theme: (
  "base-lightest": color($theme-color-base-lightest, set-theme, no-warn),
  "base-lighter": color($theme-color-base-lighter, set-theme, no-warn),
  "base-light": color($theme-color-base-light, set-theme, no-warn),
  "base": color($theme-color-base, set-theme, no-warn),
  "base-dark": color($theme-color-base-dark, set-theme, no-warn),
  "base-darker": color($theme-color-base-darker, set-theme, no-warn),
  "base-darkest": color($theme-color-base-darkest, set-theme, no-warn),
  "ink": color($theme-color-base-ink, set-theme, no-warn),
  "primary-lightest": color($theme-color-primary-lightest, set-theme, no-warn),
  "primary-lighter": color($theme-color-primary-lighter, set-theme, no-warn),
  "primary-light": color($theme-color-primary-light, set-theme, no-warn),
  "primary": color($theme-color-primary, set-theme, no-warn),
  "primary-vivid": color($theme-color-primary-vivid, set-theme, no-warn),
  "primary-dark": color($theme-color-primary-dark, set-theme, no-warn),
  "primary-darker": color($theme-color-primary-darker, set-theme, no-warn),
  "primary-darkest": color($theme-color-primary-darkest, set-theme, no-warn),
  "secondary-lightest":
    color($theme-color-secondary-lightest, set-theme, no-warn),
  "secondary-lighter": color($theme-color-secondary-lighter, set-theme, no-warn),
  "secondary-light": color($theme-color-secondary-light, set-theme, no-warn),
  "secondary": color($theme-color-secondary, set-theme, no-warn),
  "secondary-vivid": color($theme-color-secondary-vivid, set-theme, no-warn),
  "secondary-dark": color($theme-color-secondary-dark, set-theme, no-warn),
  "secondary-darker": color($theme-color-secondary-darker, set-theme, no-warn),
  "secondary-darkest": color($theme-color-secondary-darkest, set-theme, no-warn),
  "accent-warm-darkest":
    color($theme-color-accent-warm-darkest, set-theme, no-warn),
  "accent-warm-darker":
    color($theme-color-accent-warm-darker, set-theme, no-warn),
  "accent-warm-dark": color($theme-color-accent-warm-dark, set-theme, no-warn),
  "accent-warm": color($theme-color-accent-warm, set-theme, no-warn),
  "accent-warm-light": color($theme-color-accent-warm-light, set-theme, no-warn),
  "accent-warm-lighter":
    color($theme-color-accent-warm-lighter, set-theme, no-warn),
  "accent-warm-lightest":
    color($theme-color-accent-warm-lightest, set-theme, no-warn),
  "accent-cool-darkest":
    color($theme-color-accent-cool-darkest, set-theme, no-warn),
  "accent-cool-darker":
    color($theme-color-accent-cool-darker, set-theme, no-warn),
  "accent-cool-dark": color($theme-color-accent-cool-dark, set-theme, no-warn),
  "accent-cool": color($theme-color-accent-cool, set-theme, no-warn),
  "accent-cool-light": color($theme-color-accent-cool-light, set-theme, no-warn),
  "accent-cool-lighter":
    color($theme-color-accent-cool-lighter, set-theme, no-warn),
  "accent-cool-lightest":
    color($theme-color-accent-cool-lightest, set-theme, no-warn),
);

$tokens-color-state: (
  "error-lighter": color($theme-color-error-lighter, set-theme, no-warn),
  "error-light": color($theme-color-error-light, set-theme, no-warn),
  "error": color($theme-color-error, set-theme, no-warn),
  "error-dark": color($theme-color-error-dark, set-theme, no-warn),
  "error-darker": color($theme-color-error-darker, set-theme, no-warn),
  "warning-lighter": color($theme-color-warning-lighter, set-theme, no-warn),
  "warning-light": color($theme-color-warning-light, set-theme, no-warn),
  "warning": color($theme-color-warning, set-theme, no-warn),
  "warning-dark": color($theme-color-warning-dark, set-theme, no-warn),
  "warning-darker": color($theme-color-warning-darker, set-theme, no-warn),
  "success-lighter": color($theme-color-success-lighter, set-theme, no-warn),
  "success-light": color($theme-color-success-light, set-theme, no-warn),
  "success": color($theme-color-success, set-theme, no-warn),
  "success-dark": color($theme-color-success-dark, set-theme, no-warn),
  "success-darker": color($theme-color-success-darker, set-theme, no-warn),
  "info-lighter": color($theme-color-info-lighter, set-theme, no-warn),
  "info-light": color($theme-color-info-light, set-theme, no-warn),
  "info": color($theme-color-info, set-theme, no-warn),
  "info-dark": color($theme-color-info-dark, set-theme, no-warn),
  "info-darker": color($theme-color-info-darker, set-theme, no-warn),
  "disabled-light": color($theme-color-disabled-light, set-theme, no-warn),
  "disabled": color($theme-color-disabled, set-theme, no-warn),
  "disabled-dark": color($theme-color-disabled-dark, set-theme, no-warn),
  "emergency": color($theme-color-emergency, set-theme, no-warn),
  "emergency-dark": color($theme-color-emergency-dark, set-theme, no-warn),
);

$project-color-shortcodes: map-collect(
  $tokens-color-theme,
  $tokens-color-state
);

$all-color-shortcodes: map-collect(
  $tokens-color-required,
  $system-color-shortcodes,
  $project-color-shortcodes
);

$color-palette-grayscale: $system-color-gray;

/*
----------------------------------------
System magic numbers for color contrast
----------------------------------------
*/

$system-wcag-magic-numbers: (
  "AA": 50,
  "AAA": 70,
  "AA-large": 40,
);

/*
----------------------------------------
Build the project type scale map
----------------------------------------
*/

$project-type-scale: (
  "3xs": system-type-scale($theme-type-scale-3xs),
  "2xs": system-type-scale($theme-type-scale-2xs),
  "xs": system-type-scale($theme-type-scale-xs),
  "sm": system-type-scale($theme-type-scale-sm),
  "md": system-type-scale($theme-type-scale-md),
  "lg": system-type-scale($theme-type-scale-lg),
  "xl": system-type-scale($theme-type-scale-xl),
  "2xl": system-type-scale($theme-type-scale-2xl),
  "3xl": system-type-scale($theme-type-scale-3xl),
);

$all-type-scale: map-collect($system-type-scale, $project-type-scale);

/*
----------------------------------------
Border-radius
----------------------------------------
*/

$project-border-radius: (
  0: 0,
  "none": 0,
  "sm": units($theme-border-radius-sm),
  "md": units($theme-border-radius-md),
  "lg": units($theme-border-radius-lg),
  "pill": 99rem,
);

$all-border-radius: map-collect(
  $project-border-radius,
  map-get($system-spacing, smaller),
  map-get($system-spacing, small)
);

/*
----------------------------------------
Column gaps
----------------------------------------
*/

$project-column-gaps: (
  "sm": $theme-column-gap-sm,
  "md": $theme-column-gap-md,
  "lg": $theme-column-gap-lg,
);

/*
----------------------------------------
Grid
----------------------------------------
*/

$grid-global: "";

@if $theme-layout-grid-use-important {
  $grid-global: "!important";
}

/*
----------------------------------------
Aspect Ratios
----------------------------------------
*/

$project-aspect-ratios: (
  "9x16": 177.77778%,
  "16x9": 56.25%,
  "1x1": 100%,
  "4x3": 75%,
  "2x1": 50%,
);

@if $test-system-color-tokens {
  $color-test: test-colors($system-color-shortcodes);
}

/*
----------------------------------------
Easing
----------------------------------------
*/
$project-easing: 0.15s ease-in-out;

/*
----------------------------------------
Project defaults
----------------------------------------
*/

$project-defaults: (
  "bg-color": $theme-body-background-color,
  "preferred-text-token": $theme-text-reverse-color,
  "fallback-text-token": $theme-text-color,
  "preferred-link-token": $theme-link-reverse-color,
  "fallback-link-token": $theme-link-color,
);