/* Copied from components/frontend/app/react/src/core/index.scss (:root, dark mode, brands). Keep in sync. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Outfit", sans-serif;
  font-weight: 400;

  --background-color: var(--neutral-background-color);
  --background-secondary: var(--neutral-background-secondary);
  --background-third: var(--neutral-background-third);
  --background-fourth: var(--neutral-background-fourth);
  --background-core: var(--neutral-background-core);

  --text-500: var(--neutral-text-500);
  --text-400: var(--neutral-text-400);
  --text-300: var(--neutral-text-300);
  --text-200: var(--neutral-text-200);
  --text-disabled: var(--neutral-text-disabled);
  --button-text: var(--brand-button-text-color);

  --border-color: var(--neutral-border-color);
  --light-border-color: var(--neutral-light-border-color);
  --dark-border-color: var(--neutral-dark-border-color);
  --input-area-border-color: var(--neutral-input-area-border-color);

  --primary-color: var(--brand-primary);
  --primary-color--hover: var(--brand-primary-hover);
  --primary-color-light: var(--brand-primary-light);
  --primary-color-light-alpha: var(--brand-primary-light-alpha);

  --medium-blue: #0092d3;
  --light-blue: #c9edfa;
  --bright-blue: #4cc2ee;
  --dark-blue: #0092d3;
  --white: #ffffff;
  --danger: #ca4040;
  --danger-hover: #af3030;
  --warning: #f2a409;
  --warning-hover: #c17306;
  --danger-light: #fef2f2;
  --success: #3ab825;
  --success-hover: #36a822;
  --info: #2ca6ff;
  --view-only: #6c7a89;
  --cancel-btn-color: #b7b7b7;

  --sidebar-background: var(--neutral-sidebar-background);
  --sidebar-highlight: var(--neutral-sidebar-highlight);
  --sidebar-text-600: var(--neutral-sidebar-text-600);
  --sidebar-text-500: var(--neutral-sidebar-text-500);
  --sidebar-text-400: var(--neutral-sidebar-text-400);
  --sidebar-text-300: var(--neutral-sidebar-text-300);
  --sidebar-border-color: var(--neutral-sidebar-border-color);

  --sidebar-min-expanded-width: 255px;
  --sidebar-max-expanded-width: 265px;
  --sidebar-expanded-width: 18%;
  --sidebar-animation-duration: 0.2s;
  --standard-container-padding: 20px;
  --default-page-padding: 60px;
  --default-page-padding--medium: 45px;
  --default-page-padding--small: 30px;

  --border-radius--small: 5px;
  --border-radius--medium: 7px;
  --border-radius--large: 10px;
  --border-radius--plus: 12px;
  --border-radius--extra-large: 15px;

  --font-size-4xl: 1.9rem;
  --font-size-3xl: 1.4rem;
  --font-size-2xl: 1.27rem;
  --font-size-xl: 1.05rem;
  --font-size-lg: 0.99rem;
  --font-size-md: 0.95rem;
  --font-size-ms: 0.86rem;
  --font-size-sm: 0.8rem;
  --font-size-xs: 0.75rem;

  --neutral-background-color: #ffffff;
  --neutral-background-secondary: #f9fafb;
  --neutral-background-third: #f5f5f5;
  --neutral-background-fourth: #d0d0d0;
  --neutral-background-core: #fff;
  --neutral-text-500: #243e5e;
  --neutral-text-400: #5e7693;
  --neutral-text-300: #99a8ba;
  --neutral-text-200: #c6c7cc;
  --neutral-text-disabled: #d8d8dd;
  --neutral-border-color: #d9d9d9;
  --neutral-light-border-color: #e5e7eb;
  --neutral-dark-border-color: #a0aec0;
  --neutral-input-area-border-color: #bbc7d6;
  --neutral-sidebar-background: #171923;
  --neutral-sidebar-highlight: #2d3748;
  --neutral-sidebar-text-600: #fff;
  --neutral-sidebar-text-500: #eeeeee;
  --neutral-sidebar-text-400: #b0b0b0;
  --neutral-sidebar-text-300: #a0aec0;
  --neutral-sidebar-border-color: #2e4257;

  --brand-primary: #00f091;
  --brand-primary-hover: #00f0c0;
  --brand-primary-light: #eafcee;
  --brand-primary-light-alpha: #2cff5d5d;
  --brand-button-text-color: #243e5e;
}

:root[data-mode="dark"] {
  color-scheme: dark;
  --neutral-background-color: #313131;
  --neutral-background-secondary: #393939;
  --neutral-background-third: #505050;
  --neutral-background-fourth: #5b5b5b;
  --neutral-background-core: #2c2c2c;
  --neutral-text-500: #ffffff;
  --neutral-text-400: #c7c8c9;
  --neutral-text-300: #aeaeae;
  --neutral-text-200: #c6c7cc;
  --neutral-text-disabled: #d8d8dd;
  --neutral-border-color: #393939;
  --neutral-light-border-color: #494949;
  --neutral-dark-border-color: #494949;
  --neutral-input-area-border-color: #494949;
  --neutral-sidebar-background: #2c2c2c;
  --neutral-sidebar-highlight: #414141;
  --neutral-sidebar-border-color: #2e4257;
  --danger-light: rgba(202, 64, 64, 0.2);
  --warning-hover: #f7c05a;
  --cancel-btn-color: #5b5b5b;
}

:root[data-brand="gold"] {
  --brand-primary: #eba636;
  --brand-primary-hover: #d9a931;
  --brand-primary-light: #fcf5ea;
  --brand-primary-light-alpha: #ffa02c5d;
  --brand-button-text-color: white;
}

:root[data-brand="purple"] {
  --brand-primary: #a036eb;
  --brand-primary-hover: #c031d9;
  --brand-primary-light: #f9eafc;
  --brand-primary-light-alpha: #ff2cff5d;
  --brand-button-text-color: white;
}

:root[data-brand="blue"] {
  --brand-primary: #367feb;
  --brand-primary-hover: #3174d9;
  --brand-primary-light: #eaf1fc;
  --brand-primary-light-alpha: #2ca7ff5d;
  --brand-button-text-color: white;
}

@media (max-width: 1300px) {
  :root {
    --default-page-padding: 35px;
  }
}