/* Color Theme */
/* Foundation */

/* Static */
@mixin static {
  --color-static-white: #fff;
  --color-static-black: #000;
  --color-static-dark-type-primary: #f7f8f8; // For loading icon use
  --color-shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
  --color-shadow-2: 0 4px 8px rgba(0, 0, 0, 2%);
}

@mixin light {
  /* Color Platte */
  --color-neutral-0: #0000;
  --color-neutral-10: #191c1d;
  --color-neutral-20: #2d3132;
  --color-neutral-50: #747778;
  --color-neutral-80: #c4c7c7;
  --color-neutral-90: #e0e3e3;
  --color-neutral-95: #eff1f1;
  --color-neutral-100: #fff;

  --color-neutral-variant-60: #928f9a;
  --color-neutral-variant-80: #c9c5d0;
  --color-neutral-variant-90: #e5e1ec;

  --color-danger-30: #930006;
  --color-danger-40: #ba1b1b;
  --color-danger-50: #dd3730;

  --color-success-60: #32873d;
  --color-success-70: #68be6c;
  --color-success-80: #83da85;
  --color-success-90: #9fe79f;

  --color-brand-30: #4300da;
  --color-brand-40: #5d34f2;
  --color-brand-50: #7958ff;

  --color-alert-70: #eb9918;
  --color-alert-99: #fff5eb;

  /* Text & Icon */
  --color-type-primary: var(--color-neutral-10);
  --color-type-secondary: var(--color-neutral-50);
  --color-type-disable: rgba(25, 28, 29, 35%); // 35% --color-neutral-10
  --color-type-link: var(--color-brand-default);

  /* Line */
  --color-line-divider: rgba(25, 28, 29, 12%); // 12% --color-neutral-10
  --color-line-border: var(--color-neutral-80);
  --color-line-border-transparent: rgba(25, 28, 29, 25%); // 25% --color-neutral-10

  /* Background */
  --color-bg-body-base: var(--color-neutral-95);
  --color-bg-body: var(--color-neutral-100);
  --color-bg-layer-2: var(--color-neutral-95);
  --color-bg-body-overlay: var(--color-neutral-100);
  --color-bg-float-base: var(--color-neutral-variant-90);
  --color-bg-float: var(--color-neutral-100);
  --color-bg-float-overlay: var(--color-neutral-100);
  --color-bg-mask: rgba(0, 0, 0, 40%); // 4% --color-neutral-0
  --color-bg-toast: var(--color-neutral-20);
  --color-bg-state-unselected: var(--color-neutral-90);
  --color-bg-state-disabled: rgba(25, 28, 29, 8%); // 8% --color-neutral-10

  /* Brand */
  // Note: System brand color. May be overwritten dynamically by js
  --color-brand-default: var(--color-brand-40);
  --color-brand-hover: var(--color-brand-50);
  --color-brand-pressed: var(--color-brand-30);

  /* Danger */
  --color-danger-default: var(--color-danger-40);
  --color-danger-hover: var(--color-danger-50);
  --color-danger-pressed: var(--color-danger-30);

  /* Success */
  --color-success-default: var(--color-success-70);
  --color-success-hover: var(--color-success-80);
  --color-success-pressed: var(--color-success-60);
  --color-success-disable: var(--color-success-90);

  /* Overlay */
  --color-overlay-neutral-hover: rgba(25, 28, 29, 8%); // 8% --color-neutral-10
  --color-overlay-neutral-pressed: rgba(25, 28, 29, 12%); // 12% --color-neutral-10
  --color-overlay-neutral-focused: rgba(25, 28, 29, 16%); // 16% --color-neutral-10
  --color-overlay-danger-hover: rgba(186, 27, 27, 8%); // 8% --color-danger-40
  --color-overlay-danger-pressed: rgba(186, 27, 27, 12%); // 12% --color-danger-40
  --color-overlay-danger-focused: rgba(186, 27, 27, 16%); // 16% --color-danger-40
  // Note: System brand color. May be overwritten dynamically by js
  --color-overlay-brand-hover: rgba(93, 52, 242, 8%); // 8% --color-brand-default
  --color-overlay-brand-pressed: rgba(93, 52, 242, 12%); // 12% --color-brand-default
  --color-overlay-brand-focused: rgba(93, 52, 242, 16%); // 16% --color-brand-default
}

@mixin dark {
  /* Color Platte */
  --color-neutral-0: #fff;
  --color-neutral-10: #f7f8f8;
  --color-neutral-20: #eff1f1;
  --color-neutral-50: #a9acac;
  --color-neutral-80: #5c5f60;
  --color-neutral-90: #444748;
  --color-neutral-95: #2d3132;
  --color-neutral-99: #191c1d;
  --color-neutral-100: #000;

  --color-neutral-variant-60: #928f9a;
  --color-neutral-variant-80: #5f5d67;
  --color-neutral-variant-90: #47464e;

  --color-danger-30: #ffdad4;
  --color-danger-40: #ffb4a9;
  --color-danger-50: #ff897a;
  --color-danger-60: #ff5449;
  --color-danger-70: #dd3730;
  --color-danger-80: #ba1b1b;

  --color-success-60: #4ea254;
  --color-success-70: #32873d;
  --color-success-80: #116d26;
  --color-success-90: #005314;

  --color-brand-30: #e6deff;
  --color-brand-40: #cabeff;
  --color-brand-50: #af9eff;
  --color-brand-70: #7958ff;

  --color-surface: var(--color-neutral-99);
  --color-surface-2:
    linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
    linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
    #191c1d;
  --color-surface-4:
    linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)),
    linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
    #191c1d;

  --color-alert-70: #a76900;
  --color-alert-99: #2b1700;

  /* Text & Icon */
  --color-type-primary: var(--color-neutral-10);
  --color-type-secondary: var(--color-neutral-50);
  --color-type-disable: rgba(247, 248, 248, 35%); // 35% --color-neutral-10;
  --color-type-link: var(--color-brand-default);

  /* Line */
  --color-line-divider: rgba(247, 248, 248, 14%); // 14% --color-neutral-10
  --color-line-border: var(--color-neutral-80);
  --color-line-border-transparent: rgba(247, 248, 248, 20%); // 20% --color-neutral-10

  /* Background */
  --color-bg-body-base: var(--color-neutral-100);
  --color-bg-body: var(--color-surface);
  --color-bg-body-overlay: var(--color-surface-2);
  --color-bg-layer-2: var(--color-surface-4);
  --color-bg-float-base: var(--color-neutral-100);
  --color-bg-float: var(--color-surface-2);
  --color-bg-float-overlay: var(--color-surface-4);
  --color-bg-mask: rgba(0, 0, 0, 60%); // 60% --color-neutral-100;
  --color-bg-toast: var(--color-neutral-80);
  --color-bg-state-unselected: var(--color-neutral-90);
  --color-bg-state-disabled: rgba(247, 248, 248, 8%); // 8% --color-neutral-10


  /* Brand */
  // Note: System brand color. May be overwritten dynamically by js
  --color-brand-default: var(--color-brand-70);
  --color-brand-hover: var(--color-brand-50);
  --color-brand-pressed: var(--color-brand-30);

  /* Danger */
  --color-danger-default: var(--color-danger-70);
  --color-danger-hover: var(--color-danger-60);
  --color-danger-pressed: var(--color-danger-80);

  /* Success */
  --color-success-default: var(--color-success-70);
  --color-success-hover: var(--color-success-60);
  --color-success-pressed: var(--color-success-80);
  --color-success-disable: var(--color-success-90);

  /* Overlay */
  --color-overlay-neutral-hover: rgba(247, 248, 248, 8%); // 8% --color-neutral-10
  --color-overlay-neutral-pressed: rgba(247, 248, 248, 12%); // 12% --color-neutral-10
  --color-overlay-neutral-focused: rgba(247, 248, 248, 16%); // 16% --color-neutral-10
  --color-overlay-danger-hover: rgba(221, 55, 48, 8%); // 8% --color-danger-40
  --color-overlay-danger-pressed: rgba(221, 55, 48, 12%); // 12% --color-danger-40
  --color-overlay-danger-focused: rgba(221, 55, 48, 16%); // 16% --color-danger-40
  // Note: System brand color. May be overwritten dynamically by js
  --color-overlay-brand-hover: rgba(202, 190, 255, 8%); // 8% --color-brand-40
  --color-overlay-brand-pressed: rgba(202, 190, 255, 12%); // 12% --color-brand-40
  --color-overlay-brand-focused: rgba(202, 190, 255, 16%); // 16% --color-brand-40
}
