@import "variables/variables";

:root {
  background-color: var(--background-primary);
  color: var(--text-color-primary);
  font-family: "SpaceMyriadGeo", arial, sans-serif;
  font-size: 10px;

  --primary: white;
  --inverted: black;

  --red: #{color-red()};
  --orange: #{color-orange()};
  --yellow: #{color-yellow()};
  --green: #{color-green()};
  --teal: #{color-teal()};
  --blue: #{color-blue()};
  --indigo: #{color-indigo()};
  --purple: #{color-purple()};
  --pink: #{color-pink()};

  --blue-40: #{color-blue(0.4)};
  --blue-20: #{color-blue(0.2)};
  --blue-10: #{color-blue(0.1)};

  --red-20: #{color-red(0.2)};

  --grey-1: #{color-grey-1()};
  --grey-2: #{color-grey-2()};
  --grey-3: #{color-grey-3()};
  --grey-4: #{color-grey-4()};
  --grey-5: #{color-grey-5()};
  --grey-6: #{color-grey-6()};

  --fill-primary: #{color-fill(0.2)};
  --fill-secondary: #{color-fill(0.16)};
  --fill-tertiary: #{color-fill(0.12)};
  --fill-quaternary: #{color-fill(0.08)};

  --background-primary: var(--primary);
  --background-secondary: var(--grey-6);

  --active-color: var(--blue);

  --light-separator-opaque: #c6c6c8;
  --dark-separator-opaque: #38383a;

  /* Buttons */
  --button-background-default: var(--blue);
  --button-background-alert: var(--red);
  --button-background-success: var(--green);
  --button-background-inverted: var(--inverted);

  --button-text-color-default: var(--primary);
  --button-text-color-hollow: var(--blue);
  --button-text-color-cancel: var(--red);
  --button-text-color-inverted: var(--primary);

  --button-loader-color-default: var(--primary);
  --button-loader-color-hollow: var(--blue);
  --button-loader-color-cancel: var(--red);
  --button-loader-color-inverted: var(--primary);

  --button-overlay: #{color-text(0.29)};

  /* Radio */
  --radio-color: var(--blue);

  /* Text Colors */
  --text-color-primary: var(--inverted);
  --text-color-secondary: #{color-text(0.6)};
  --text-color-tertiary: #{color-text(0.3)};
  --text-color-quaternary: #{color-text(0.18)};

  --text-color-error: var(--red);

  /* Status Colors */
  --success-color: var(--green);
  --error-color: var(--red);
  --info-color: var(--blue);
  --alert-color: var(--yellow);

  /* Form Components */
  --form-item-height: 48px;
  --form-side-padding: 16px;
  --form-border-radius: 12px;
  --form-label-margin: 8px;
  --form-placeholder-color: var(--text-color-tertiary);
  --form-placeholder-color-disabled: var(--grey-4);
  --form-background-color: var(--background-primary);
  --form-background-color-disabled: var(--grey-6);
  --form-border-color: var(--grey-4);
  --form-border-color-disabled: var(--grey-6);
  --form-border-color-error: var(--red);
  --form-border-color-success: var(--green);
  --form-border-color-focus: var(--blue);
  --form-border-color-active: var(--blue);
  --form-border-color-hover: var(--grey-1);
  --form-box-shadow: 0px 4px 10px rgba(0, 122, 255, 0.1);
  --form-icon-size: 16px;

  /* Onboarding Layout Gradient Colors */
  --gradient-1: #e8f7f0;
  --gradient-2: #e4d5f7;
  --gradient-3: #f3edec;
  --gradient-4: #dbe1f8;
  --gradient-5: #f9e9e9;
  --gradient-6: #e0f2f7;

  /* Spacing */
  --spacing-2: 2px;
  --spacing-4: 2px;
  --spacing-8: 4px;
  --spacing-16: 8px;
  --spacing-24: 16px;
  --spacing-32: 24px;
  --spacing-48: 32px;
  --spacing-64: 48px;
  --spacing-96: 64px;

  /* Misc */
  --illustration-bot-margin: var(--spacing-32);
  --loader-color: var(--primary);
  --sidebar-size: 0px;
  --sidebar-background-primary: var(--inverted);
  --sidebar-background-secondary: #{color-grey-6(1, true)};

  @include screen-md() {
    --sidebar-size: 284px;
  }

  @include screen-lg() {
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-48: 48px;
    --spacing-64: 64px;
    --spacing-96: 96px;

    --sidebar-size: 344px;

    --form-item-height: 56px;
    --form-border-radius: 16px;
    --form-icon-size: 24px;
  }
}

:root.dark {
  --primary: black;
  --inverted: white;

  --red: #{color-red(1, true)};
  --orange: #{color-orange(1, true)};
  --yellow: #{color-yellow(1, true)};
  --green: #{color-green(1, true)};
  --teal: #{color-teal(1, true)};
  --blue: #{color-blue(1, true)};
  --indigo: #{color-indigo(1, true)};
  --purple: #{color-purple(1, true)};
  --pink: #{color-pink(1, true)};

  --grey-1: #{color-grey-1(1, true)};
  --grey-2: #{color-grey-2(1, true)};
  --grey-3: #{color-grey-3(1, true)};
  --grey-4: #{color-grey-4(1, true)};
  --grey-5: #{color-grey-5(1, true)};
  --grey-6: #{color-grey-6(1, true)};

  --fill-1: #{color-fill(0.36)}; // Primary
  --fill-2: #{color-fill(0.32)}; // Secondary
  --fill-3: #{color-fill(0.24)}; // Tertiary
  --fill-4: #{color-fill(0.18)}; // Quaternary

  //--background-primary: black;
  --background-secondary: #1c1c1e;

  //--text-color-primary: white;
  --text-color-secondary: #{color-text(0.6, true)};
  --text-color-tertiary: #{color-text(0.3, true)};
  --text-color-quaternary: #{color-text(0.18, true)};
}
