:root {
  /* Define CSS Variables */
  --custom-font-family: "Helvetica, Arial, sans-serif";
  --custom-font-size-base: 16px;
  --custom-font-size-h1: 2.5rem;
  --custom-font-size-h2: 2rem;
  --custom-font-size-h3: 1.75rem;
  --custom-font-size-body: 1rem;

  --custom-color-primary: #3498db;
  --custom-color-secondary: #2ecc71;
  --custom-color-text: #333;
  --custom-color-background: #f4f4f4;
  --custom-color-border: #ddd;

  --custom-padding-base: 16px;
  --custom-margin-base: 16px;
  --custom-line-height: 1.5;
}

/* Global Styles */
body {
  font-family: var(--custom-font-family);
  font-size: var(--custom-font-size-base);
  color: var(--custom-color-text);
  background-color: var(--custom-color-background);
  line-height: var(--custom-line-height);
  margin: 0;
  padding: 0;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--custom-color-primary);
  margin: 0 0 var(--custom-margin-base);
  line-height: 1.2;
}

h1 {
  font-size: var(--custom-font-size-h1);
}

h2 {
  font-size: var(--custom-font-size-h2);
}

h3 {
  font-size: var(--custom-font-size-h3);
}

p {
  font-size: var(--custom-font-size-body);
  margin-bottom: var(--custom-margin-base);
}

/* UI Component Base Styles */
.ui-component {
  background-color: #fff;
  border: 1px solid var(--custom-color-border);
  padding: var(--custom-padding-base);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Example Component */
.ui-button {
  padding: 0.5em 1em;
  background-color: var(--custom-color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ui-button:hover {
  background-color: darken(var(--custom-color-primary), 10%);
}

.rtl {
  text-align: right;
  direction: rtl;
  animation: ani 1s;
}
.ltr {
  text-align: left;
  direction: ltr;
  animation: ani 1s;
}

@keyframes ani {
  from {
    opacity: 0;
    scale: 1.1;
    transform: translateY(5rem);
  }
  to {
    opacity: 1;
    scale: 1;
    transform: translateY(0px);
  }
}

.toast-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.toast {
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s ease;
}

.toast-success {
  background-color: green;
}

.toast-error {
  background-color: red;
}

.toast-loading {
  background-color: orange;
}