@import url("https://fonts.cdnfonts.com/css/inter");

:root {
  --default-image-border-radius: 4px;

  /* Backgrounds */
  --bg-default: #ffffff;
  --bg-contrast: #000000;
  --bg-contrast-soft: #171717;
  --bg-neutral: #dddddd;
  --panel-bg: #f3f5f7;
  --panel-soft: #eee9ea;

  /* Texts */
  --text-default: #171717;
  --text-contrast: #ffffff;
  --text-secondary: #8c8c8c;
  --text-placeholder: #808080;
  --status-error-text: #ed3057;

  /* Borders */
  --border-default: #ffffff;
  --border-contrast: #000000;
  --border-neutral-50: #ccc;
  --border-neutral-100: #c3bfbf;
  --border-error: rgba(255, 0, 0, 0.4);

  /* Gradients */
  --gradient-striped-soft: linear-gradient(
    to right,
    #eee9ea 0%,
    #dcd7d4 50%,
    #eee9ea 100%
  );
  --gradient-accent-vertical: linear-gradient(
      0deg,
      rgb(156 121 255/50%) 30%,
      #0000 0 70%,
      rgb(156 121 255/100%) 0
    )
    50%/8% 100%;
  --gradient-accent-horizontal: linear-gradient(
      90deg,
      rgb(156 121 255/25%) 30%,
      #0000 0 70%,
      rgb(156 121 255/75%) 0
    )
    50%/100% 8%;
}

html[app-theme-change="dark"] {
  --bg-default: #000000;
  --bg-contrast: #ffffff;
  --text-default: #ffffff;
  --text-contrast: #171717;
  --bg-contrast-soft: #ffffff;
  --panel-bg: #000000;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--panel-bg);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}