@import url("./components/custom/btn-area.css");
@import url("./components/custom/border.css");
@import url("./components/custom/content.css");
@import url("./components/custom/flex-box.css");
@import url("./components/custom/icon.css");
@import url("./components/custom/list-box.css");

@import url("./components/native/body.css");
@import url("./components/native/button.css");
@import url("./components/native/footer.css");
@import url("./components/native/head.css");
@import url("./components/native/header.css");
@import url("./components/native/input.css");

@import url("../scripts/components/AppCard/AppCard.css");
@import url("../scripts/components/ArticleCard/ArticleCard.css");
@import url("../scripts/components/BackBtn/BackBtn.css");
@import url("../scripts/components/DropMenu/DropMenu.css");
@import url("../scripts/components/FakeSelect/FakeSelect.css");
@import url("../scripts/components/Input/Input.css");
@import url("../scripts/components/Page/Page.css");
@import url("../scripts/components/PlanCard/PlanCard.css");

@import url("../scripts/screens/About/About.css");
@import url("../scripts/screens/Article/Article.css");
@import url("../scripts/screens/Blog/Blog.css");
@import url("../scripts/screens/Catalog/Catalog.css");
@import url("../scripts/screens/Home/Home.css");
@import url("../scripts/screens/Privacy/Privacy.css");
@import url("../scripts/screens/Terms/Terms.css");

:root {
  /* Medidas e Estrutura (Estáticos) */
  --max-screen-width: 900px;
  --line-height: 35px;
  --header-height: 72px;
  --border-radius: 15px;

  --container-padding: 30px;
  --content-padding: 15px;
  --list-gap: 5px;
}

:root,
body.light-mode {
  --body-bg: #f5f5f5;
  --body-color: #191919;
  --primary-color: #cecece;
  --container-bg: #dfdfdf;
  --border: 2px solid #00000022;
  --box-shadow: 0 0 15px 1px #00000015;

  --progress-container-color: #00000030;
  --progress-bar-neutral-color: #fefefeaa;
  --progress-bar-negative-color: #6b303faa;
  --progress-bar-positive-color: #306b3faa;

  --neutral-color: #fefefe;
  --deny-color: #fe6d6d;
  --confirm-color: #71f983;
}

body.dark-mode {
  --body-bg: #0a0a0a;
  --body-color: #e6e6e6;
  --primary-color: #cbcbcb;
  --container-bg: #dfdfdf;
  --border: 2px solid #00000022;
  --box-shadow: 0 0 105px 1px #000000ff;

  --progress-container-color: #ffffff15;
  --progress-bar-neutral-color: #fefefeaa;
  --progress-bar-negative-color: #6b303faa;
  --progress-bar-positive-color: #106b1faa;

  --neutral-color: #2d2d2d;
  --confirm-color: #45a05a;
  --deny-color: #a04555;
}

* {
  user-select: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #1f1f1f;
  text-align: center;
  font-family: "monospace";
}