/* color theme */
:root {
  --color-green: #3f9142;
  /*--color-green: #3C853C; enable this for AA contrast approval */
  --color-green-90: #e9f5ea;
  --color-green-80: #cae7cb;
  --color-green-70: #a8d8aa;

  --color-green--hover: #3C8A3F;
  --color-green--active: #37803A;
  --color-green--disabled: #77BA7A;

  --color-orange: #F4801F;
  --color-red: #d63b49;
  /*--color-red: #CD2D3C; enable this for AA contrast approval */
  --color-brown: #8C602C;
  --color-blue: #1470e1;
  --color-purple: #960eeb;

  --color-neutral-100: white;
  --color-neutral-99: #fefefe;
  --color-neutral-98: #fbfcfc;
  --color-neutral-95: #f3f4f5;
  --color-neutral-92: #EEEFF0;
  --color-neutral-90: #e5e7ea;
  --color-neutral-85: #dee0e2;
  --color-neutral-80: #c9ced3;
  --color-neutral-70: #adb4bc;
  --color-neutral-60: #919ba5;
  --color-neutral-50: #74818e;
  --color-neutral-40: #5d6873;
  --color-neutral-35: #525b65;
  --color-neutral-30: #464e57;
  --color-neutral-25: #3b4248;
  --color-neutral-20: #2f353a;
  --color-neutral-15: #24282c;
  --color-neutral-10: #191b1e;
  --color-neutral-5: #0d0f10;
  --color-neutral-0: #020202;
}

:root {
  --body-bg-color: var(--color-neutral-95);
  --body-fg-color: var(--color-neutral-20);

  --primary-bg-color: var(--color-green);
  --primary-fg-color: white;

  --color-fg-muted: var(--color-neutral-35);
  --color-fg-danger: var(--color-red);

  --warning-bg-color: #fceca2;
  --warning-fg-color: #776618;

  --border-highlight-color: #000000;

  --placeholder-color: #000000;

  --tooltip-bg-color: var(--color-neutral-20);
  --tooltip-fg-color: var(--color-neutral-95);

  --menu-bg-color: var(--color-neutral-100);
  --menu-fg-color: var(--color-neutral-10);
  --menu-option-divider-color: var(--color-neutral-90);
  --menu-border-color: var(--color-neutral-90);
  --menu-section-bg-color: var(--color-neutral-92);
  --menu-list-height: 350px;
  --menu-min-width: 200px;
  --menu-select-min-width: 225px;
  --menu-menu-min-width: 150px;
}

/* Sizes */
:root {
  --size-3: 0.1875rem;
  --size-4: 0.25rem;
  --size-6: 0.375rem;
  --size-8: 0.5rem;
  --size-10: 0.625rem;
  --size-12: 0.75rem;
  --size-13: 0.8125rem;
  --size-14: 0.875rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;

  --container-radius: var(--size-8);
  --shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f
}

/* controls (buttons, inputs, etc) */
:root {
  --control-bg-color: var(--color-neutral-92);
  --control-bg-color--hover: var(--color-neutral-90);
  --control-bg-color--active: var(--color-neutral-85);
  --control-bg-color--disabled: var(--color-neutral-85);
  --control-fg-color--placeholder: var(--color-neutral-60);
  --control-fg-color--placeholder--active: var(--color-neutral-50);
  --control-fg-color--disabled: var(--color-neutral-40);
  --control-fg-color: var(--color-neutral-10);

  --control-focus-color: var(--color-green);
  --control-focus-bg-color: var(--color-neutral-100);

  /* If a control has been activated */
  --control-bg-color--active-element: var(--color-green);
  --control-fg-color--active-element: var(--color-neutral-100);

  /* If a control is in an emphasis state (like a selected date range) or a table row */
  --control-variant-emphasis-bg-color: var(--color-green-90);
  --control-variant-emphasis-bg-color--hover: var(--color-green-80);
  --control-variant-emphasis-bg-color--active: var(--color-green-70);
  --control-variant-emphasis-fg-color: var(--color-neutral-10);

  /* If a control is in an muted state (like a disabled date range) or a table row */
  --control-variant-muted-bg-color: var(--color-neutral-90);
  --control-variant-muted-bg-color--hover: var(--color-neutral-85);
  --control-variant-muted-bg-color--active: var(--color-neutral-80);
  --control-variant-muted-fg-color: var(--color-neutral-10);


  --control-on-surface-bg-color: var(--color-neutral-95);
  --control-on-surface-bg-color--hover: var(--color-neutral-92);
  --control-on-surface-bg-color--active: var(--color-neutral-90);
  --control-on-surface-bg-color--disabled: var(--color-neutral-85);


  --control-icon-color: var(--color-fg-muted);
  --badge-size: 1.25rem;
  --badge-lg-size: 1.75rem;
  --control-small-size: 1.75rem;
  --control-size: 2rem;
  --control-large-size: 2.5rem;
  --control-radius: var(--size-6);
  --control-segment-radius: var(--size-3);
  --control-small-gap: var(--size-4);
  --control-gap: var(--size-8);
  --control-small-font-size: var(--size-12);
  --control-font-size: var(--size-14);
  --control-small-padding: var(--size-8);
  --control-padding: var(--size-12);
  --control-button-unweighted: 400;
  --control-button-weight: 600;
  --control-button-heavy: 700;
  --control-label-font-size: var(--size-14);
  --control-label-weight: 700;
  --control-border-color: #00000022;
  --control-border-color--disabled: #00000011;
  --control-surface-color: #00000010;
  --control-inset-shadow-color: #1f23280a;
  --control-dark-border-color: var(--color-neutral-60);

  --button-danger-fg-color: var(--color-red);
  --button-primary-fg-color: white;
  --button-primary-bg-color: var(--color-green);
  --button-primary-bg-color--hover: var(--color-green--hover);
  --button-primary-bg-color--active: var(--color-green--active);
  --button-primary-bg-color--disabled: var(--color-green--disabled);

  --button-invisible-bg-color--hover: #0000000A;
  --button-invisible-bg-color--active: #00000015;
  --button-invisible-bg-color--disabled: #14070719;

  --button-white-bg-color: white;
  --button-white-bg-color--hover: var(--color-neutral-98);
  --button-white-bg-color--active: var(--color-neutral-95);
  --button-white-bg-color--disabled: #f3f4f5aa;

  --card-radius: var(--size-10);
  --card-variant-normal-border-color: var(--color-neutral-90);
  --card-variant-normal-bg: var(--color-neutral-100);
  --card-variant-muted-bg: var(--color-neutral-90);
  --card-variant-muted-border-color: var(--color-neutral-80);

  --card-section-variant-muted-bg: var(--color-neutral-95);

  --nav-control-size: 2.25rem;
  --nav-underline-active-size: 5px;
  --nav-border-color: #00000011;
  --nav-active-indicator-color: var(--color-orange);
  --nav-control-bg-color--active: var(--color-neutral-95);
  --nav-control-bg-color-primary-variant--active: var(--color-neutral-20);
  --nav-control-bg-color-primary-variant--hover: var(--color-neutral-25);
  --nav-control-chip-bg-color-primary-variant--active: var(--color-neutral-30);
  --nav-control-fg-color-primary-variant--active: var(--color-neutral-98);
}