// global colors
$base-0: #ffffff;
$base-1000: #000;
$aqua-100: #ddfffa;
$aqua-500: #6af0db;
$aqua-600: #39cccc;
$aqua-800: #238072;
$blue-100: #eff9ff;
$blue-200: #bfedff;
$blue-400: #7fdbff;
$blue-600: #337ab7;
$blue-700: #0a568d;
$charcoal-300: #767676;
$charcoal-400: #555555;
$charcoal-500: #4f4f4f;
$charcoal-600: #444444;
$charcoal-700: #333333;
$charcoal-800: #222222;
$charcoal-900: #111111;
$purple1-50: #fbfbff;
$purple1-100: #f7f3ff;
$purple1-200: #efddff;
$purple1-300: #dbadff;
$purple1-400: #bf7ff8;
$purple1-500: #a742ed;
$purple1-600: #7c24b4;
$purple1-700: #55127f;
$purple1-800: #390559;
$purple1-900: #1a002e;
$navy-50: #fdfdff;
$navy-100: #f4f3fb;
$navy-200: #e2dff1;
$navy-300: #c7c3dd;
$navy-400: #9e9abb;
$navy-500: #706b8e;
$navy-600: #4f4a6a;
$navy-700: #383451;
$navy-800: #28243f;
$navy-900: #140d30;
$navy-950: #0e0923;
$gray-100: #f8f8f8;
$gray-200: #f5f5f5;
$gray-300: #eeeeee;
$gray-400: #e5e5e5;
$gray-500: #dddddd;
$gray-600: #bbbbbb;
$gray-700: #aaaaaa;
$gray-800: #8e8e8e;
$gray-900: #888888;
$green-100: #fafdfa;
$green-200: #e2fbe6;
$green-400: #2ecc40;
$green-500: #00be13;
$green-700: #00a110;
$lime-200: #beead8;
$lime-500: #14cc80;
$lime-700: #00bb64;
$olive-500: #3d9970;
$olive-700: #078573;
$olive-800: #0e7868;
$yellow-500: #ffdc00;
$orange-100: #fff8e7;
$orange-500: #ffba11;
$orange-700: #ff851b;
$pink-100: #ffedf9;
$pink-400: #f198d3;
$pink-700: #921f6b;
$pink-800: #85144b;
$purple-100: #f1efff;
$purple-300: #a195ef;
$purple-600: #4b19d5;
$purple-700: #2d2081;
$red-100: #fdf5f5;
$red-500: #f83f23;
$red-600: #eb130f;
$red-700: #db260a;
$slate-100: #f9fafb;
$slate-500: #c2cace;
$slate-800: #202632;
$slate-900: #151921;

// color aliases
$color-aliases: (
  "text-base": $navy-800,
  "text-lightest": $navy-600,
  "text-link": $purple-600,
  "text-link-hover": $purple-700,
  "text-display": $navy-900,
  "text-body": $navy-800,
  "button-primary": $olive-700,
  "button-primary-hover": $olive-800,
  "button-purple": $purple-600,
  "button-purple-hover": $purple-700,
  "border": $navy-200,
  "panel-background": $gray-100,
  "icon": $charcoal-700,
  "state-success": $green-500,
  "state-fail": $red-500,
  "state-warning": $orange-500,
  "brand": $lime-500,
  "selected": $purple-600,
  "selected-bg": $purple-100,
);

// typography
$font-size-base: 16px;
$font-sizes: (
  "xs": 0.75rem,
  "sm": 0.875rem,
  "lg": 1.125rem,
  "xl": 1.25rem,
  "2xl": 1.5rem,
  "3xl": 2rem,
);
$font-size-aliases: (
  "template": map-get($font-sizes, "sm"),
  "body": $font-size-base,
  "code": map-get($font-sizes, "xs"),
  "heading-jumbo": map-get($font-sizes, "3xl"),
  "heading-1": map-get($font-sizes, "2xl"),
  "heading-2": map-get($font-sizes, "xl"),
  "heading-3": map-get($font-sizes, "lg"),
  "heading-4": $font-size-base,
  "heading-5": map-get($font-sizes, "sm"),
  "heading-6": map-get($font-sizes, "xs"),
);
$font-family-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-display: "Aeonik", $font-family-base;

$line-heights: (
  "default": 1.5,
  "golden": 1.618,
  "heading": 1.3,
  "tight": 1.2,
  "tightest": 1,
  "code": 1.3,
);

// breakpoints
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 960px;
$screen-lg: 1280px;
$screen-xl: 1536px;

// settings
$gutter: 32px;
$max-w: (
  "outer-container": 1520px,
  "container": 1440px,
  "narrow-container": 960px,
  "prose": 712px,
  "search": 500px,
);
$rounded: 6px;
$rounded-lg: 16px;
$transition-speed: 150ms;
$filter-brand-green: invert(58%) sepia(82%) saturate(466%) hue-rotate(103deg)
  brightness(95%) contrast(86%);
$header-height: (
  "one-row": 64px,
  "two-rows": 113px,
);
$sidebar-width: 270px;
$text-on-dark-subdued-opacity: 0.8;
$text-on-dark-very-subdued-opacity: 0.7;

// shadows
$box-shadow-depth-100: 0px 4px 4px 0px rgba($base-1000, 0.01),
  0px 3px 3px 0px rgba($base-1000, 0.02), 0px 2px 2px 0px rgba($base-1000, 0.04),
  0px 1px 0px 0px rgba($base-1000, 0.09), 0px 0px 0px 1px rgba($base-1000, 0.09);
$box-shadow-depth-100-hover: 0px 6px 7px -2px rgba($base-1000, 0.08),
  0px 10px 14px 0px rgba($base-1000, 0.02),
  0px 2px 2px 0px rgba($base-1000, 0.04), 0px 1px 0px 0px rgba($base-1000, 0.09),
  0px 0px 0px 1px rgba($base-1000, 0.09);
$box-shadow-depth-200: 0px 3px 0px 1px rgba($base-1000, 0.05),
  0px 0px 0px 1px rgba($base-1000, 0.1);
$box-shadow-depth-500: 0px 4px 15px rgba($base-1000, 0.2);
$box-shadow-depth-800: 0 20px 20px rgba($base-1000, 0.07),
  0 10px 20px rgba($base-1000, 0.05), 0 13px 18px rgba($base-1000, 0.04),
  0 7px 9px rgba($base-1000, 0.03);

$icon-sizes: (
  xs: 12px,
  sm: 22px,
  md: 24px,
);
