:root {
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-surface-muted: #ffffff;
  /* Accent Colors */
  --accent-light-blue: #CBE7FF;
  --accent-pastel-green: #E3FF66;
  --accent-off-white: #F7F8F1;
  --accent-sky-blue: #7CBCF4;
  --accent-dark-blue: #3551A4;
  --accent-darker-blue: #253872;
  --accent-error: #D32F2F;

  --accent-default-first-color: #353839;
  --accent-default-second-color: #2a2a2a;
  --accent-default-third-color: #b0b0b0;

  --main-accent-color: var(--accent-default-first-color);
  --second-accent-color: var(--accent-default-second-color);
  --third-accent-color: var(--accent-default-third-color);

  --box-shadow-panel: 0 4px 12px color-mix(in srgb, var(--third-accent-color) 20%, transparent);
  --box-shadow-input-error: 0 1px 2px color-mix(in srgb, crimson 65%, transparent),
                            0 0 2px 1px color-mix(in srgb, crimson 45%, transparent);
  --box-shadow-form: 0 4px 12px color-mix(in srgb, var(--third-accent-color) 15%, transparent);
  --box-shadow-input-focus: 0 0 0 2px color-mix(in srgb, var(--third-accent-color) 30%, transparent);
  --box-shadow-link-focus: 0 0 0 2px color-mix(in srgb, var(--third-accent-color) 30%, transparent);
  --box-shadow-button: 0 2px 6px color-mix(in srgb, var(--main-accent-color) 30%, transparent);
  --box-shadow-button-hover: 0 2px 6px color-mix(in srgb, var(--main-accent-color) 50%, transparent);

  --color-input-border-default: var(--color-link-hover);
  --color-input-border-focus:  color-mix(in srgb, var(--color-link-hover) 85%, black);
  --color-input-border-error: var(--accent-error);
  --color-button-bg: var(--main-accent-color);
  --color-button-bg-hover: color-mix(in srgb, var(--main-accent-color) 85%, black);
  --color-button-text: var(--accent-off-white);

  --color-smaller-text: #454545;
}

.progress-opacity {
  opacity: 0.65;
}