@use "sass:map";
@use "sass:list";
@use "sass:meta";

// Setup stuff
// --------------------------------

$disabledOpacity: 0.25;

// All the button colors we have

$buttonColors: "base", "accentPrimary", "accentSecondary", "brandPrimary", "brandSecondary", "red",
  "peach", "yellow", "lime", "teal", "pink";

// Helper to make sure you're using a valid button color

@function buttonColorName($color) {
  @if not list.index($buttonColors, $color) {
    @error "#{$color} is not a valid button color. Expected one of #{$buttonColors}.";
  }

  @return $color;
}

// Get the usable CSS var of either a color shade (like `$green-50`) or a
// token (like `color-success`). These functions do the same thing, but
// passing a second argument for which list to pull from was cumbersome.

// _namedColor is a little silly, but the goal is that sometimes we still want
// a semantically named color (like `color-focus-border`) that inherits from a
// token. This is not possible if they're defined in the same list.

@function _colorShade($name) {
  @if map.get($shades, $name) == null {
    @error "Unknown color '#{$name}'.";
  }
  @return var(--#{$name});
}

@function _colorToken($name) {
  @if map.get($tokens, $name) == null {
    @error "Unknown color '#{$name}'.";
  }
  @return var(--#{$name});
}

@function _namedColor($name) {
  @if map.get($namedColors, $name) == null {
    @error "Unknown color '#{$name}'.";
  }
  @return var(--#{$name});
}

// Set all the color definitions as CSS vars at a high level, for the correct "theme"
// of light or dark mode. (Only light mode is currently implemented.)

@mixin _themeVars($colors, $appearance) {
  @each $name, $value in $colors {
    // Dark is optional for now, so just return the light color if it's not defined
    @if type-of($value) != "map" {
      --#{$name}: #{$value};
    } @else {
      --#{$name}: #{map-get($value, $appearance)};
    }
  }
}

@mixin baseColors {
  body {
    @include _themeVars($shades, "light");
    @include _themeVars($tokens, "light");
    @include _themeVars($namedColors, "light");
  }

  // .forceLight {
  //   @include _themeVars($shades, "light");
  //   @include _themeVars($tokens, "light");
  //   @include _themeVars($namedColors, "light");
  // }
  // .forceDark {
  //   @include _themeVars($shades, "dark");
  //   @include _themeVars($tokens, "dark");
  //   @include _themeVars($namedColors, "dark");
  // }
}

// The shades
// --------------------------------

@function shade($lightness, $saturationModifier: 0%, $alpha: 1) {
  @return hsla(240, 12% + $saturationModifier, $lightness, $alpha);
}

$shades: (
  // Neutral
  neutral-00: #000000,
  neutral-05: red,
  neutral-10: #191c1d,
  neutral-15: red,
  neutral-20: #2e3132,
  neutral-25: #393c3d,
  neutral-30: #444748,
  neutral-35: #505354,
  neutral-40: #5c5f5f,
  neutral-50: #747878,
  neutral-60: #8e9192,
  neutral-70: #a9acac,
  neutral-80: #c4c7c7,
  neutral-90: #e1e3e3,
  neutral-95: #eff1f1,
  neutral-98: #f8fafa,
  neutral-99: #fafdfd,
  neutral-100: rgb(255, 255, 255),
  // Peach
  peach-00: #000000,
  peach-05: #2c0003,
  peach-10: #410007,
  peach-15: #54000c,
  peach-20: #650713,
  peach-25: #75151d,
  peach-30: #852127,
  peach-35: #952d32,
  peach-40: #a5393c,
  peach-50: #c55153,
  peach-60: #ec6868,
  peach-70: #ff8887,
  peach-80: #ffb3b1,
  peach-90: #ffdad8,
  peach-95: #ffedeb,
  peach-98: #fff8f7,
  peach-99: #fffbff,
  peach-100: #ffffff,
  // Yellow
  yellow-00: #000000,
  yellow-05: #171000,
  yellow-10: #241a00,
  yellow-15: #302400,
  yellow-20: #3d2e00,
  yellow-25: #4b3900,
  yellow-30: #584400,
  yellow-35: #664f00,
  yellow-40: #755b00,
  yellow-50: #937300,
  yellow-60: #b18c0e,
  yellow-70: #cea62e,
  yellow-75: #f6cd5b,
  yellow-80: #fbd261,
  yellow-90: #ffe08f,
  yellow-95: #ffefce,
  yellow-98: #fff8f1,
  yellow-99: #fffbff,
  yellow-100: #fff,
  // Green
  green-00: #000000,
  green-05: #001503,
  green-10: #002106,
  green-15: #002d0b,
  green-20: #003910,
  green-25: #004615,
  green-30: #00531b,
  green-35: #006021,
  green-40: #056e27,
  green-50: #2d883e,
  green-60: #49a355,
  green-70: #64be6d,
  green-80: #80db86,
  green-90: #9bf7a0,
  green-95: #c7ffc4,
  green-98: #ebffe6,
  green-99: #f6fff1,
  green-100: #fff,
  // Red
  red-00: #000000,
  red-05: #2d0001,
  red-10: #410002,
  red-15: #540004,
  red-20: #690006,
  red-25: #7d0009,
  red-30: #93000d,
  red-35: #a80512,
  red-40: #ba1a1d,
  red-50: #de3632,
  red-60: #ff544b,
  red-70: #ff897e,
  red-80: #ffb4ab,
  red-90: #ffdad6,
  red-95: #ffedea,
  red-98: #fff8f7,
  red-99: #fffbff,
  red-100: #fff,
  // Purple
  purple-00: #000,
  purple-05: #130044,
  purple-10: #1f0060,
  purple-15: #2a007b,
  purple-20: #350097,
  purple-25: #410fac,
  purple-30: rgb(76, 36, 183),
  purple-35: #5834c3,
  purple-40: #6543d0,
  purple-50: #7e5eeb,
  purple-60: #987bff,
  purple-70: #b29dff,
  purple-80: #ccbeff,
  purple-90: #e7deff,
  purple-95: #f0eeff,
  purple-98: #fbf7ff,
  purple-99: #fffbff,
  purple-100: #fff,
  // Teal
  teal-00: #000,
  teal-05: #00131a,
  teal-10: #001f28,
  teal-15: #002a35,
  teal-20: #003543,
  teal-25: #004151,
  teal-30: #004e60,
  teal-35: #005a6f,
  teal-40: #00677e,
  teal-50: #00829e,
  teal-60: #009ebf,
  teal-70: #35b9dd,
  teal-80: #5bd5fa,
  teal-90: #b5ebff,
  teal-95: #dcf5ff,
  teal-98: #f2fbff,
  teal-99: #f9fdff,
  teal-100: #fff,
  // Pink
  pink-00: #000,
  pink-05: #24002a,
  pink-10: #36003e,
  pink-15: #470050,
  pink-20: #580064,
  pink-25: #661171,
  pink-30: #73217e,
  pink-35: #812e8b,
  pink-40: #8f3b98,
  pink-50: #ab55b3,
  pink-60: #c86fcf,
  pink-70: #e689ec,
  pink-80: #fcaaff,
  pink-90: #ffd6fc,
  pink-95: #ffebfa,
  pink-98: #fff7fa,
  pink-99: #fffbff,
  pink-100: #fff,
  // Ochre
  ochre-00: #000,
  ochre-05: #2b1a00,
  ochre-10: #442900,
  // ochre-15: #470050,
  // ochre-20: #580064,
  // ochre-25: #661171,
  // ochre-30: #73217e,
  // ochre-35: #812e8b,
  ochre-40: #e0895a,
  ochre-50: #d48b63,
  ochre-60: #ebb090,
  ochre-70: #f7c7ae,
  // ochre-80: #fcaaff,
  ochre-90: #e9d7be,
  ochre-95: #fdebe1,
  ochre-98: #faefea,
  ochre-99: #fff9f6,
  ochre-100: #fff
);

$neutral-00: _colorShade(neutral-00);
$neutral-05: _colorShade(neutral-05);
$neutral-10: _colorShade(neutral-10);
$neutral-15: _colorShade(neutral-15);
$neutral-20: _colorShade(neutral-20);
$neutral-25: _colorShade(neutral-25);
$neutral-30: _colorShade(neutral-30);
$neutral-35: _colorShade(neutral-35);
$neutral-40: _colorShade(neutral-40);
$neutral-50: _colorShade(neutral-50);
$neutral-60: _colorShade(neutral-60);
$neutral-70: _colorShade(neutral-70);
$neutral-80: _colorShade(neutral-80);
$neutral-90: _colorShade(neutral-90);
$neutral-95: _colorShade(neutral-95);
$neutral-98: _colorShade(neutral-98);
$neutral-99: _colorShade(neutral-99);
$neutral-100: _colorShade(neutral-100);

$peach-00: _colorShade(peach-00);
$peach-05: _colorShade(peach-05);
$peach-10: _colorShade(peach-10);
$peach-15: _colorShade(peach-15);
$peach-20: _colorShade(peach-20);
$peach-25: _colorShade(peach-25);
$peach-30: _colorShade(peach-30);
$peach-35: _colorShade(peach-35);
$peach-40: _colorShade(peach-40);
$peach-50: _colorShade(peach-50);
$peach-60: _colorShade(peach-60);
$peach-70: _colorShade(peach-70);
$peach-80: _colorShade(peach-80);
$peach-90: _colorShade(peach-90);
$peach-95: _colorShade(peach-95);
$peach-98: _colorShade(peach-98);
$peach-99: _colorShade(peach-99);
$peach-100: _colorShade(peach-100);

$yellow-05: _colorShade(yellow-05);
$yellow-10: _colorShade(yellow-10);
$yellow-15: _colorShade(yellow-15);
$yellow-20: _colorShade(yellow-20);
$yellow-25: _colorShade(yellow-25);
$yellow-30: _colorShade(yellow-30);
$yellow-35: _colorShade(yellow-35);
$yellow-40: _colorShade(yellow-40);
$yellow-50: _colorShade(yellow-50);
$yellow-60: _colorShade(yellow-60);
$yellow-70: _colorShade(yellow-70);
$yellow-75: _colorShade(yellow-75);
$yellow-80: _colorShade(yellow-80);
$yellow-90: _colorShade(yellow-90);
$yellow-95: _colorShade(yellow-95);
$yellow-95: _colorShade(yellow-95);
$yellow-98: _colorShade(yellow-98);
$yellow-99: _colorShade(yellow-99);
$yellow-100: _colorShade(yellow-100);

$green-05: _colorShade(green-05);
$green-10: _colorShade(green-10);
$green-15: _colorShade(green-15);
$green-20: _colorShade(green-20);
$green-25: _colorShade(green-25);
$green-30: _colorShade(green-30);
$green-35: _colorShade(green-35);
$green-40: _colorShade(green-40);
$green-50: _colorShade(green-50);
$green-60: _colorShade(green-60);
$green-70: _colorShade(green-70);
$green-80: _colorShade(green-80);
$green-90: _colorShade(green-90);
$green-95: _colorShade(green-95);
$green-95: _colorShade(green-95);
$green-98: _colorShade(green-98);
$green-99: _colorShade(green-99);
$green-100: _colorShade(green-100);

$red-05: _colorShade(red-05);
$red-10: _colorShade(red-10);
$red-15: _colorShade(red-15);
$red-20: _colorShade(red-20);
$red-25: _colorShade(red-25);
$red-30: _colorShade(red-30);
$red-35: _colorShade(red-35);
$red-40: _colorShade(red-40);
$red-50: _colorShade(red-50);
$red-60: _colorShade(red-60);
$red-70: _colorShade(red-70);
$red-80: _colorShade(red-80);
$red-90: _colorShade(red-90);
$red-95: _colorShade(red-95);
$red-95: _colorShade(red-95);
$red-98: _colorShade(red-98);
$red-99: _colorShade(red-99);
$red-100: _colorShade(red-100);

$purple-05: _colorShade(purple-05);
$purple-10: _colorShade(purple-10);
$purple-15: _colorShade(purple-15);
$purple-20: _colorShade(purple-20);
$purple-25: _colorShade(purple-25);
$purple-30: _colorShade(purple-30);
$purple-35: _colorShade(purple-35);
$purple-40: _colorShade(purple-40);
$purple-50: _colorShade(purple-50);
$purple-60: _colorShade(purple-60);
$purple-70: _colorShade(purple-70);
$purple-80: _colorShade(purple-80);
$purple-90: _colorShade(purple-90);
$purple-95: _colorShade(purple-95);
$purple-95: _colorShade(purple-95);
$purple-98: _colorShade(purple-98);
$purple-99: _colorShade(purple-99);
$purple-100: _colorShade(purple-100);

$teal-00: _colorShade(teal-00);
$teal-05: _colorShade(teal-05);
$teal-10: _colorShade(teal-10);
$teal-15: _colorShade(teal-15);
$teal-20: _colorShade(teal-20);
$teal-25: _colorShade(teal-25);
$teal-30: _colorShade(teal-30);
$teal-35: _colorShade(teal-35);
$teal-40: _colorShade(teal-40);
$teal-50: _colorShade(teal-50);
$teal-60: _colorShade(teal-60);
$teal-70: _colorShade(teal-70);
$teal-80: _colorShade(teal-80);
$teal-90: _colorShade(teal-90);
$teal-95: _colorShade(teal-95);
$teal-95: _colorShade(teal-95);
$teal-98: _colorShade(teal-98);
$teal-99: _colorShade(teal-99);
$teal-100: _colorShade(teal-100);

$pink-00: _colorShade(pink-00);
$pink-05: _colorShade(pink-05);
$pink-10: _colorShade(pink-10);
$pink-15: _colorShade(pink-15);
$pink-20: _colorShade(pink-20);
$pink-25: _colorShade(pink-25);
$pink-30: _colorShade(pink-30);
$pink-35: _colorShade(pink-35);
$pink-40: _colorShade(pink-40);
$pink-50: _colorShade(pink-50);
$pink-60: _colorShade(pink-60);
$pink-70: _colorShade(pink-70);
$pink-80: _colorShade(pink-80);
$pink-90: _colorShade(pink-90);
$pink-95: _colorShade(pink-95);
$pink-95: _colorShade(pink-95);
$pink-98: _colorShade(pink-98);
$pink-99: _colorShade(pink-99);
$pink-100: _colorShade(pink-100);

$ochre-00: _colorShade(ochre-00);
$ochre-05: _colorShade(ochre-05);
$ochre-10: _colorShade(ochre-10);
// $ochre-15: _colorShade(ochre-15);
// $ochre-20: _colorShade(ochre-20);
// $ochre-25: _colorShade(ochre-25);
// $ochre-30: _colorShade(ochre-30);
// $ochre-35: _colorShade(ochre-35);
$ochre-40: _colorShade(ochre-40);
$ochre-50: _colorShade(ochre-50);
$ochre-60: _colorShade(ochre-60);
$ochre-70: _colorShade(ochre-70);
// $ochre-80: _colorShade(ochre-80);
$ochre-90: _colorShade(ochre-90);
$ochre-95: _colorShade(ochre-95);
$ochre-98: _colorShade(ochre-98);
$ochre-99: _colorShade(ochre-99);
$ochre-100: _colorShade(ochre-100);

// The tokens
// --------------------------------

// Color tokens generally match the Material 3 style, and should mostly start with $color-
// https://m3.material.io/foundations/design-tokens/how-to-read-tokens

$tokens: (
  // Fills:
  color-neutral-shadow:
    (
      light: shade(25%, -15%, 0.22),
      dark: shade(1%, -15%, 0.22),
    ),
  //
  // Material style tokens
  // Prefer these
  // ----------------------------------------------
  color-primary:
    (
      light: $purple-40,
      dark: $purple-80,
    ),
  color-on-primary: $purple-99,
  color-secondary: (
    light: $green-50,
    dark: $green-80,
  ),
  color-on-secondary: $green-99,
  // Background
  color-page-background:
    (
      light: rgb(255, 255, 255),
      dark: $neutral-10,
    ),
  color-page-background--rgb:
    // This "raw" color allows using the CSS var inside of rgba() to control color opacity
  (
      light: "255, 255, 255",
      dark: "25, 28, 29",
    ),
  color-on-page-background: (
    light: $neutral-10,
    dark: $neutral-90,
  ),
  // Surface
  color-surface:
    (
      light: #f3f6fa,
      dark: $neutral-20,
    ),
  color-on-surface: (
    light: $neutral-10,
    dark: $neutral-90,
  ),
  color-surface-active: // For use as a background color with :active when things are pressed
  (
      light: $neutral-90,
      dark: $neutral-10,
    ),
  color-surface-variant: (
    light: $neutral-90,
    dark: $neutral-30,
  ),
  color-on-surface-variant: (
    light: $neutral-40,
    dark: $neutral-80,
  ),
  color-outline: $neutral-90,
  color-outline-variant: $neutral-80,
  color-primary-container: (
    light: $purple-95,
    dark: $purple-40,
  ),
  color-inverse-surface: (
    light: $neutral-20,
    dark: $neutral-90,
  ),
  color-inverse-on-surface: $neutral-95,
  color-secondary-container: (
    light: $green-95,
    dark: $green-40,
  ),
  // Custom tokens that are too good to give up, but in the naming style of Material
  color-success: $green-50,
  color-on-success-surface: $green-20,
  color-success-surface: $green-95,

  color-error: $red-40,
  color-on-error-surface: $red-20,
  color-error-surface: $red-90,

  color-caution: $yellow-60,
  color-on-caution-surface: $yellow-10,
  color-caution-surface: $yellow-90,

  // Brand colors that don't change based on theme
  color-brand-primary: $purple-30,
  color-brand-primary--rgb: "76, 36, 183",
  color-brand-secondary: $green-50
);

$color-primary: _colorToken(color-primary);
$color-on-primary: _colorToken(color-on-primary);
$color-secondary: _colorToken(color-secondary);
$color-on-secondary: _colorToken(color-on-secondary);

$color-page-background: _colorToken(color-page-background);
$color-page-background--rgb: _colorToken(color-page-background--rgb);
$color-on-page-background: _colorToken(color-on-page-background);

$color-surface: _colorToken(color-surface);
$color-on-surface: _colorToken(color-on-surface);
$color-surface-active: _colorToken(color-surface-active);

$color-surface-variant: _colorToken(color-surface-variant);
$color-on-surface-variant: _colorToken(color-on-surface-variant);

$color-outline: _colorToken(color-outline);
$color-outline-variant: _colorToken(color-outline-variant);
$color-primary-container: _colorToken(color-primary-container);
$color-inverse-surface: _colorToken(color-inverse-surface);
$color-inverse-on-surface: _colorToken(color-inverse-on-surface);
$color-secondary-container: _colorToken(color-secondary-container);

$color-neutral-shadow: _colorToken(color-neutral-shadow);

$color-success: _colorToken(color-success);
$color-on-success-surface: _colorToken(color-on-success-surface);
$color-success-surface: _colorToken(color-success-surface);

$color-error: _colorToken(color-error);
$color-on-error-surface: _colorToken(color-on-error-surface);
$color-error-surface: _colorToken(color-error-surface);

$color-caution: _colorToken(color-caution);
$color-on-caution-surface: _colorToken(color-on-caution-surface);
$color-caution-surface: _colorToken(color-caution-surface);

$color-brand-primary: _colorToken(color-brand-primary);
$color-brand-primary--rgb: _colorToken(color-brand-primary--rgb);
$color-brand-secondary: _colorToken(color-brand-secondary);

$namedColors: (
  // Our custom tokens
  // ----------------------------------------------
  perk-color-loans: #ec6868,
  perk-color-ewa: #fbd261,
  perk-color-awards: #6bc573,
  perk-color-messages: #60c2e1,
  perk-color-save: #c86fcf,
  perk-color-education: #cda76d,
  perk-color-stream: #dd956d,

  // Accessibility
  color-selection: $purple-80,
  color-focus-border: $color-brand-primary,
  color-focus-outside-border: $purple-90,

  // Text
  text-grey:
    (
      light: $color-on-surface-variant,
      dark: shade(60%),
    ),
  card-border-color: (
    light: $color-outline,
    dark: shade(20%),
  )
);

$perk-color-loans: _namedColor(perk-color-loans);
$perk-color-ewa: _namedColor(perk-color-ewa);
$perk-color-awards: _namedColor(perk-color-awards);
$perk-color-messages: _namedColor(perk-color-messages);
$perk-color-save: _namedColor(perk-color-save);
$perk-color-education: _namedColor(perk-color-education);
$perk-color-stream: _namedColor(perk-color-stream);

$color-selection: _namedColor(color-selection);
$color-focus-border: _namedColor(color-focus-border);
$color-focus-outside-border: _namedColor(color-focus-outside-border);

$text-grey: _namedColor(text-grey);

$card-border-color: _namedColor(card-border-color);