/* Copyright James Long. MIT; see LICENSE.txt. Original Actual Budget palette/light theme. */
:root {
  --palette-gray50: #f6f8fa;
  --palette-gray80: #f0f4f6;
  --palette-gray100: #e8ecf0;
  --palette-gray150: #d4dae0;
  --palette-gray200: #bdc5cf;
  --palette-gray300: #98a1ae;
  --palette-gray400: #747c8b;
  --palette-gray500: #4d5768;
  --palette-gray600: #373b4a;
  --palette-gray700: #242733;
  --palette-gray800: #141520;
  --palette-gray900: #080811;

  --palette-navy50: #f7fafc;
  --palette-navy100: #e8ecf0;
  --palette-navy150: #d9e2ec;
  --palette-navy200: #bcccdc;
  --palette-navy300: #9fb3c8;
  --palette-navy400: #829ab1;
  --palette-navy500: #627d98;
  --palette-navy600: #486581;
  --palette-navy700: #334e68;
  --palette-navy800: #243b53;
  --palette-navy900: #102a43;

  --palette-blue50: #f5fcff;
  --palette-blue100: #e3f0ff;
  --palette-blue150: #b3d9ff;
  --palette-blue200: #8bcafd;
  --palette-blue300: #66b5fa;
  --palette-blue400: #40a5f7;
  --palette-blue500: #2b8fed;
  --palette-blue600: #1980d4;
  --palette-blue700: #1271bf;
  --palette-blue800: #0b5fa3;
  --palette-blue900: #034388;

  --palette-green50: #fafffd;
  --palette-green100: #effcf6;
  --palette-green150: #c6f7e2;
  --palette-green200: #8eedc7;
  --palette-green300: #65d6ad;
  --palette-green400: #3ebd93;
  --palette-green500: #27ab83;
  --palette-green600: #199473;
  --palette-green700: #147d64;
  --palette-green800: #0c6b58;
  --palette-green900: #014d40;

  --palette-orange50: #fffefa;
  --palette-orange100: #fffbea;
  --palette-orange150: #fff7c4;
  --palette-orange200: #fcf088;
  --palette-orange300: #f5e35d;
  --palette-orange400: #f2d047;
  --palette-orange500: #e6bb20;
  --palette-orange600: #d4a31c;
  --palette-orange700: #b88115;
  --palette-orange800: #87540d;
  --palette-orange900: #733309;

  --palette-red50: #fff1f1;
  --palette-red100: #ffe3e3;
  --palette-red150: #ffbdbd;
  --palette-red200: #ff9b9b;
  --palette-red300: #f86a6a;
  --palette-red400: #ef4e4e;
  --palette-red500: #e12d39;
  --palette-red600: #cf1124;
  --palette-red700: #ab091e;
  --palette-red800: #8a041a;
  --palette-red900: #610316;

  --palette-purple50: #f9f6fe;
  --palette-purple100: #f2ebfe;
  --palette-purple125: #e4d4ff;
  --palette-purple150: #dac4ff;
  --palette-purple200: #b990ff;
  --palette-purple300: #a368fc;
  --palette-purple400: #9446ed;
  --palette-purple500: #8719e0;
  --palette-purple600: #7a0ecc;
  --palette-purple700: #690cb0;
  --palette-purple800: #580a94;
  --palette-purple900: #44056e;

  --palette-white: #ffffff;
  --palette-black: #000000;
  --palette-hover: #fafafa;
  --palette-border: #e8ecf0;
  --palette-selected: #b3d9ff;

  --palette-chartQual1: #45b29d;
  --palette-chartQual2: #efc94c;
  --palette-chartQual3: #e27a3f;
  --palette-chartQual4: #df5a49;
  --palette-chartQual5: #5f91b8;
  --palette-chartQual6: #e2a37f;
  --palette-chartQual7: #55dbc1;
  --palette-chartQual8: #efda97;
  --palette-chartQual9: #df948a;
}

:root {
  --color-pageBackground: var(--palette-navy100);
  --color-pageBackgroundModalActive: var(--palette-navy200);
  --color-pageBackgroundTopLeft: var(--palette-navy100);
  --color-pageBackgroundBottomRight: var(--palette-blue150);
  --color-pageBackgroundLineTop: var(--palette-white);
  --color-pageBackgroundLineMid: var(--palette-navy100);
  --color-pageBackgroundLineBottom: var(--palette-blue150);
  --color-pageText: #272630;
  --color-pageTextLight: var(--palette-navy500);
  --color-pageTextSubdued: var(--palette-navy300);
  --color-pageTextDark: var(--palette-navy800);
  --color-pageTextPositive: var(--palette-purple600);
  --color-pageTextLink: var(--palette-blue600);
  --color-pageTextLinkLight: var(--palette-blue300);

  --color-cardBackground: var(--palette-white);
  --color-cardBorder: var(--palette-purple700);
  --color-cardShadow: var(--palette-navy700);

  --color-tableBackground: var(--palette-white);
  --color-tableRowBackgroundAlternate: var(--color-tableBackground);
  --color-tableRowBackgroundHover: var(--palette-navy50);
  --color-tableText: var(--color-pageText);
  --color-tableTextItemAdded: var(--color-tableText);
  --color-tableTextLight: var(--palette-navy400);
  --color-tableTextSubdued: var(--palette-navy100);
  --color-tableTextSelected: var(--palette-navy700);
  --color-tableTextHover: var(--palette-navy900);
  --color-tableTextInactive: var(--palette-navy500);
  --color-tableHeaderText: var(--palette-navy600);
  --color-tableHeaderBackground: var(--palette-white);
  --color-tableBorder: var(--palette-navy100);
  --color-tableBorderSelected: var(--palette-purple500);
  --color-tableBorderHover: var(--palette-purple400);
  --color-tableBorderSeparator: var(--palette-navy400);
  --color-tableRowBackgroundHighlight: var(--palette-blue150);
  --color-tableRowBackgroundHighlightText: var(--palette-navy700);
  --color-tableRowHeaderBackground: var(--palette-navy50);
  --color-tableRowHeaderText: var(--palette-navy800);

  --color-numberPositive: var(--palette-green700);
  --color-numberNegative: var(--palette-red500);
  --color-numberNeutral: var(--palette-navy100);
  --color-budgetNumberNegative: var(--color-numberNegative);
  --color-budgetNumberZero: var(--color-tableTextSubdued);
  --color-budgetNumberNeutral: var(--color-tableText);
  --color-budgetNumberPositive: var(--color-budgetNumberNeutral);
  --color-templateNumberFunded: var(--color-numberPositive);
  --color-templateNumberUnderFunded: var(--palette-orange700);
  --color-toBudgetPositive: var(--color-numberPositive);
  --color-toBudgetZero: var(--color-numberPositive);
  --color-toBudgetNegative: var(--color-budgetNumberNegative);

  --color-sidebarBackground: var(--palette-navy900);
  --color-sidebarItemBackgroundPending: var(--palette-orange200);
  --color-sidebarItemBackgroundPositive: var(--palette-green500);
  --color-sidebarItemBackgroundFailed: var(--palette-red300);
  --color-sidebarItemBackgroundHover: var(--palette-navy800);
  --color-sidebarItemAccentSelected: var(--palette-purple200);
  --color-sidebarItemBackgroundSelected: color-mix(
    in srgb,
    var(--color-sidebarItemAccentSelected) 22%,
    transparent
  );
  --color-sidebarItemText: var(--palette-navy150);
  --color-sidebarItemTextUpdated: var(--color-sidebarItemText);
  --color-sidebarItemTextSelected: var(--palette-purple200);
  --color-sidebarBudgetName: var(--palette-navy150);
  --color-sidebarHeaderText: var(--palette-white);
  --color-sidebarTextSubdued: var(--palette-navy300);
  --color-sidebarTextMuted: var(--palette-navy500);
  --color-sidebarTextPositive: var(--color-sidebarItemBackgroundPositive);
  --color-sidebarTextFailed: var(--color-sidebarItemBackgroundFailed);
  --color-sidebarBackgroundFailedSubtle: color-mix(
    in srgb,
    var(--color-sidebarItemBackgroundFailed) 16%,
    transparent
  );
  --color-sidebarBorder: var(--color-sidebarItemBackgroundHover);
  --color-sidebarControlBackground: var(--color-sidebarItemBackgroundHover);
  --color-sidebarBrand: var(--color-sidebarItemAccentSelected);

  --color-menuBackground: var(--palette-white);
  --color-menuItemBackground: var(--palette-navy50);
  --color-menuItemBackgroundHover: var(--palette-navy100);
  --color-menuItemText: var(--palette-navy900);
  --color-menuItemTextHover: var(--color-menuItemText);
  --color-menuItemTextSelected: var(--palette-purple300);
  --color-menuItemTextHeader: var(--palette-navy400);
  --color-menuBorder: var(--palette-navy100);
  --color-menuBorderHover: var(--palette-purple100);
  --color-menuKeybindingText: var(--palette-navy400);
  --color-menuAutoCompleteBackground: var(--palette-navy900);
  --color-menuAutoCompleteBackgroundHover: var(--palette-navy600);
  --color-menuAutoCompleteText: var(--palette-white);
  --color-menuAutoCompleteTextHover: var(--palette-green150);
  --color-menuAutoCompleteTextHeader: var(--palette-orange150);
  --color-menuAutoCompleteItemTextHover: var(--color-menuAutoCompleteText);
  --color-menuAutoCompleteItemText: var(--color-menuAutoCompleteText);

  --color-modalBackground: var(--palette-white);
  --color-modalBorder: var(--palette-white);
  --color-mobileHeaderBackground: var(--palette-purple400);
  --color-mobileHeaderText: var(--palette-navy50);
  --color-mobileHeaderTextSubdued: var(--palette-gray200);
  --color-mobileHeaderTextHover: rgba(200, 200, 200, 0.15);
  --color-mobilePageBackground: var(--palette-navy50);
  --color-mobileNavBackground: var(--palette-white);
  --color-mobileNavItem: var(--palette-gray300);
  --color-mobileNavItemSelected: var(--palette-purple500);
  --color-mobileAccountShadow: var(--palette-navy300);
  --color-mobileAccountText: var(--palette-blue800);
  --color-mobileTransactionSelected: var(--palette-purple500);

  --color-mobileViewTheme: var(--color-mobileHeaderBackground);
  --color-mobileConfigServerViewTheme: var(--palette-purple500);

  --color-markdownNormal: var(--palette-purple150);
  --color-markdownDark: var(--palette-purple400);
  --color-markdownLight: var(--palette-purple100);

  --color-buttonMenuText: var(--palette-navy100);
  --color-buttonMenuTextHover: var(--palette-navy50);
  --color-buttonMenuBackground: transparent;
  --color-buttonMenuBackgroundHover: rgba(200, 200, 200, 0.25);
  --color-buttonMenuBorder: var(--palette-navy500);
  --color-buttonMenuSelectedText: var(--palette-green800);
  --color-buttonMenuSelectedTextHover: var(--palette-orange800);
  --color-buttonMenuSelectedBackground: var(--palette-orange200);
  --color-buttonMenuSelectedBackgroundHover: var(--palette-orange300);
  --color-buttonMenuSelectedBorder: var(--color-buttonMenuSelectedBackground);

  --color-buttonPrimaryText: var(--palette-white);
  --color-buttonPrimaryTextHover: var(--color-buttonPrimaryText);
  --color-buttonPrimaryBackground: var(--palette-purple500);
  --color-buttonPrimaryBackgroundHover: var(--palette-purple300);
  --color-buttonPrimaryBorder: var(--color-buttonPrimaryBackground);
  --color-buttonPrimaryShadow: rgba(0, 0, 0, 0.3);
  --color-buttonPrimaryDisabledText: var(--palette-white);
  --color-buttonPrimaryDisabledBackground: var(--palette-navy300);
  --color-buttonPrimaryDisabledBorder: var(
    --color-buttonPrimaryDisabledBackground
  );

  --color-buttonNormalText: var(--palette-navy900);
  --color-buttonNormalTextHover: var(--color-buttonNormalText);
  --color-buttonNormalBackground: var(--palette-white);
  --color-buttonNormalBackgroundHover: var(--color-buttonNormalBackground);
  --color-buttonNormalBorder: var(--palette-navy150);
  --color-buttonNormalShadow: rgba(0, 0, 0, 0.2);
  --color-buttonNormalSelectedText: var(--palette-white);
  --color-buttonNormalSelectedBackground: var(--palette-blue600);
  --color-buttonNormalDisabledText: var(--palette-navy300);
  --color-buttonNormalDisabledBackground: var(--color-buttonNormalBackground);
  --color-buttonNormalDisabledBorder: var(--color-buttonNormalBorder);

  --color-calendarText: var(--palette-navy50);
  --color-calendarBackground: var(--palette-navy900);
  --color-calendarItemText: var(--palette-navy150);
  --color-calendarItemBackground: var(--palette-navy800);
  --color-calendarSelectedBackground: var(--palette-navy500);
  --color-datePickerRangeBackground: var(--palette-purple150);

  --color-buttonBareText: var(--color-pageText);
  --color-buttonBareTextHover: var(--color-pageText);
  --color-buttonBareDisabledText: var(--color-pageTextSubdued);
  --color-buttonBareBackground: transparent;
  --color-buttonBareDisabledBackground: var(--color-buttonBareBackground);
  --color-buttonBareBackgroundHover: rgba(100, 100, 100, 0.15);
  --color-buttonBareBackgroundActive: rgba(100, 100, 100, 0.25);

  --color-noticeBackground: var(--palette-green150);
  --color-noticeBackgroundLight: var(--palette-green100);
  --color-noticeBackgroundDark: var(--palette-green500);
  --color-noticeText: var(--palette-green700);
  --color-noticeTextLight: var(--palette-green500);
  --color-noticeTextDark: var(--palette-green900);
  --color-noticeTextMenu: var(--palette-green200);
  --color-noticeBorder: var(--palette-green500);
  --color-warningBackground: var(--palette-orange200);
  --color-warningText: var(--palette-orange700);
  --color-warningTextLight: var(--palette-orange500);
  --color-warningTextDark: var(--palette-orange900);
  --color-warningBorder: var(--palette-orange500);
  --color-errorBackground: var(--palette-red100);
  --color-errorText: var(--palette-red500);
  --color-errorTextDark: var(--palette-red700);
  --color-errorTextDarker: var(--palette-red900);
  --color-errorTextMenu: var(--palette-red200);
  --color-errorBorder: var(--palette-red500);
  --color-upcomingBackground: var(--palette-purple100);
  --color-upcomingText: var(--palette-purple700);
  --color-upcomingBorder: var(--palette-purple500);

  --color-formLabelText: var(--palette-blue600);
  --color-formLabelBackground: var(--palette-blue200);
  --color-formInputBackground: var(--palette-navy50);
  --color-formInputBackgroundSelected: var(--palette-white);
  --color-formInputBackgroundSelection: var(--palette-purple500);
  --color-formInputBorder: var(--palette-navy150);
  --color-formInputTextReadOnlySelection: var(--palette-navy50);
  --color-formInputBorderSelected: var(--palette-purple500);
  --color-formInputText: var(--palette-navy900);
  --color-formInputTextSelected: var(--palette-navy50);
  --color-formInputTextPlaceholder: var(--palette-navy300);
  --color-formInputTextPlaceholderSelected: var(--palette-navy200);
  --color-formInputTextSelection: var(--palette-navy100);
  --color-formInputShadowSelected: var(--palette-purple300);
  --color-formInputTextHighlight: var(--palette-purple200);
  --color-checkboxText: var(--color-tableBackground);
  --color-checkboxBackgroundSelected: var(--palette-blue500);
  --color-checkboxBorderSelected: var(--palette-blue500);
  --color-checkboxShadowSelected: var(--palette-blue300);
  --color-checkboxToggleBackground: var(--palette-gray400);
  --color-checkboxToggleBackgroundSelected: var(--palette-purple600);
  --color-checkboxToggleDisabled: var(--palette-gray200);

  --color-pillBackground: var(--palette-navy150);
  --color-pillBackgroundLight: var(--palette-navy50);
  --color-pillText: var(--palette-navy800);
  --color-pillTextHighlighted: var(--palette-purple600);
  --color-pillBorder: var(--palette-navy150);
  --color-pillBorderDark: var(--palette-navy300);
  --color-pillBackgroundSelected: var(--palette-blue150);
  --color-pillTextSelected: var(--palette-blue900);
  --color-pillBorderSelected: var(--palette-purple500);
  --color-pillTextSubdued: var(--palette-navy200);

  --color-reportsRed: var(--palette-red300);
  --color-reportsBlue: var(--palette-blue400);
  --color-reportsGreen: var(--palette-green400);
  --color-reportsGray: var(--palette-gray400);
  --color-reportsLabel: var(--palette-navy900);
  --color-reportsInnerLabel: var(--palette-navy800);
  --color-reportsNumberPositive: var(--color-numberPositive);
  --color-reportsNumberNegative: var(--color-numberNegative);
  --color-reportsNumberNeutral: var(--color-numberNeutral);
  --color-reportsChartFill: var(--color-reportsNumberPositive);

  --color-noteTagBackground: var(--palette-purple125);
  --color-noteTagBackgroundHover: var(--palette-purple150);
  --color-noteTagDefault: var(--palette-purple125);
  --color-noteTagText: var(--palette-black);

  --color-budgetCurrentMonth: var(--color-tableBackground);
  --color-budgetOtherMonth: var(--palette-gray50);
  --color-budgetHeaderCurrentMonth: var(--color-budgetOtherMonth);
  --color-budgetHeaderOtherMonth: var(--palette-gray80);

  --color-floatingActionBarBackground: var(--palette-purple400);
  --color-floatingActionBarBorder: var(--color-floatingActionBarBackground);
  --color-floatingActionBarText: var(--palette-navy50);

  --color-tooltipText: var(--palette-navy900);
  --color-tooltipBackground: var(--palette-white);
  --color-tooltipBorder: var(--palette-navy150);

  --color-calendarCellBackground: var(--palette-navy100);

  --color-overlayBackground: rgba(0, 0, 0, 0.3);

  --color-chartQual1: var(--palette-chartQual1);
  --color-chartQual2: var(--palette-chartQual2);
  --color-chartQual3: var(--palette-chartQual3);
  --color-chartQual4: var(--palette-chartQual4);
  --color-chartQual5: var(--palette-chartQual5);
  --color-chartQual6: var(--palette-chartQual6);
  --color-chartQual7: var(--palette-chartQual7);
  --color-chartQual8: var(--palette-chartQual8);
  --color-chartQual9: var(--palette-chartQual9);
}

:root { --color-pageBackground: #fff; }