/*
 * Distributor:   Youplus
 * Environment:   Local Development
 */

:root {
  /* Body */
  --body-background-color: #fff;

  /* Colors -> Text */
  --text-color-black: #121212;
  --text-color-gray: #2c2c2c;
  --text-color-white: #fff;

  /* Colors -> Primary */
  --primary-color: hsl(190, 61%, 32%);
  --primary-color-light: hsl(190, 61%, 42%);
  --primary-color-lighter: hsl(190, 61%, 62%);
  --primary-color-dark: hsl(190, 61%, 22%);

  /* Colors -> Secondary */
  --secondary-color: hsl(190, 61%, 85%);
  --secondary-color-light: hsl(190, 61%, 95%);
  --secondary-color-dark: hsl(190, 61%, 75%);

  /* Colors -> Muted */
  --muted-color: hsl(0, 0%, 62%);
  --muted-color-light: hsl(0, 0%, 90%);
  --muted-color-lighter: hsl(0, 0%, 95%);

  /* Colors -> Success */
  --success-color: #3b7c4a;
  --success-color-light: #c3e6cb;
  --success-color-dark: #155724;

  /* Colors -> Warning */
  --warning-color: #ff9334;
  --warning-color-light: #ffb26f;
  --warning-color-dark: #ff7700;

  /* Colors -> Error */
  --error-color: #c81224;
  --error-color-dark: #721c24;
  --error-color-light: #f5c6cb;

  /* Colors -> Link */
  --link-color: var(--primary-color-light);
  --link-color-hover: var(--primary-color);
  --link-color-active: var(--primary-color);

  /* Colors -> Border */
  --border-color: hsl(0, 0%, 62%);
  --border-color-light: hsl(0, 0%, 72%);
  --border-color-dark: hsl(0, 0%, 52%);

  /* Top Navigation */
  --navbar-background-color: var(--primary-color);
  --navbar-font-color: var(--text-color-white);
  --navbar-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --navbar-border-bottom: none;

  /* Side Navigation */
  --sidenav-background-color: hsl(190, 61%, 91%);
  --sidenav-icon-color: rgba(0, 0, 0, 0.54);
  --sidenav-font-color: rgba(0, 0, 0, 0.54);
  --sidenav-overlay-background-color: #fff;

  --sidenav-profile-height: 64px;
  --sidenav-profile-font-color: rgba(0, 0, 0, 0.54);
  --sidenav-profile-border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  /* Forms -> Label */
  --label-color: var(--text-color-gray);

  /* Forms -> Input */
  --input-color: var(--text-color-gray);
  --input-background-color: #f0f0f0;
  --input-disabled-color: #949494;

  /* Forms -> Select */
  --select-color: var(--text-color-gray);
  --select-background-color: #f0f0f0;

  /* Forms -> Radio */
  --radio-fill-color: var(--primary-color);
  --radio-empty-color: #5a5a5a;
  --radio-border: 2px solid var(--primary-color);

  /* Forms -> Switch */
  --switch-bg-color: var(--primary-color);
  --switch-checked-lever-bg: var(--primary-color-lighter);

  /* Slider */
  --slider-bg-color: var(--primary-color);
  --slider-bg-color-light: var(--primary-color-lighter);
  --slider-indicator-color: var(--primary-color-light);

  /* Button -> Primary */
  --button-primary-color: var(--text-color-white);
  --button-primary-background-color: var(--primary-color);
  --button-primary-background-color-hover: var(--primary-color-light);

  /* Button -> Secondary */
  --button-secondary-color: var(--text-color-gray);
  --button-secondary-background-color: rgb(235, 235, 235);
  --button-secondary-background-color-hover: rgb(225, 225, 225);

  /* Button -> Raised */
  --button-raised-color: var(--text-color-white);
  --button-raised-background-color: var(--primary-color);
  --button-raised-background-color-focus: var(--primary-color-light);
  --button-raised-background-color-hover: var(--primary-color-light);

  /* Component -> Card */
  --card-color: var(--text-color-black);
  --card-background-color: rgba(0, 0, 0, 0.04);
  --card-footer-background-color: var(--secondary-color);
  --card-footer-color: var(--text-color-gray);

  --card-action-color: var(--text-color-black);
  --card-action-background-color: rgba(0, 0, 0, 0.04);
  --card-action-border-top: 1px solid hsla(0, 0%, 63%, 0.2);

  --card-action-active-font-color: #155724;
  --card-action-active-border-top: 1px solid rgba(240, 240, 255, 0.1);
  --card-action-active-background-color: #d4edda;

  --card-action-inactive-font-color: #856404;
  --card-action-inactive-border-top: 1px solid rgba(240, 240, 255, 0.1);
  --card-action-inactive-background-color: #fff3cd;

  /* Component -> Note */
  --note-color: #856404;
  --note-background-color: #fff3cd;
  --note-border-color: #ffeeba;

  /* Component -> Primary Header */
  --premium-header-background-color: rgb(239, 245, 245);
  --premium-header-font-color: var(--text-color-black);
  --premium-header-border-bottom: 1px solid rgba(240, 240, 255, 0.1);

  /* Component - Sub Header */
  --fixed-bar-background-color: rgb(239, 245, 245);
  --fixed-bar-font-color: var(--text-color-black);
  --fixed-bar-border-bottom: 1px solid rgba(240, 240, 255, 0.1);

  /* Component -> Bank ID Selector */
  --bank-id-selector-background-color: transparent;
  --bank-id-selector-border: 0.0625rem solid #9b9b9b;

  /* Componenet -> Status Badge */
  --status-badge-background-color-active: var(--success-color-light);
  --status-badge-background-color-processing: var(--warning-color-light);
  --status-badge-background-color-action-require: var(--error-color-light);
  --status-badge-background-color-inactive: var(--card-action-background-color);
}