/*
 * Wargini UI Foundation
 * ---------------------
 * Shared visual foundation for the new Wargini frontend.
 *
 * Rules:
 * - No page-specific component styles here.
 * - No legacy overrides.
 * - No !important.
 * - Components consume these tokens; they do not redefine the foundation.
 */

.wargini-ui {
  /* Layout */
  --wui-container: 1280px;
  --wui-container-wide: 1560px;
  --wui-gutter: 24px;

  /* Spacing */
  --wui-space-1: 4px;
  --wui-space-2: 8px;
  --wui-space-3: 12px;
  --wui-space-4: 16px;
  --wui-space-5: 24px;
  --wui-space-6: 32px;
  --wui-space-7: 48px;
  --wui-space-8: 64px;

  /* Shape */
  --wui-radius-sm: 8px;
  --wui-radius-md: 14px;
  --wui-radius-lg: 20px;

  /* Brand */
  --wui-color-primary: #18312f;
  --wui-color-surface: #ffffff;
  --wui-color-background: #edf4f1;

  width: 100%;
  min-width: 0;
  direction: rtl;
  color: var(--wui-color-primary);
  font-family: Arial, Tahoma, sans-serif;
}

.wargini-ui,
.wargini-ui *,
.wargini-ui *::before,
.wargini-ui *::after {
  box-sizing: border-box;
}

.wui-container {
  --wui-container-size: var(--wui-container);

  width: min(
    calc(100% - (2 * var(--wui-gutter))),
    var(--wui-container-size)
  );
  margin-inline: auto;
}

.wui-container--wide {
  --wui-container-size: var(--wui-container-wide);
}

@media (max-width: 980px) {
  .wargini-ui {
    --wui-gutter: 18px;
  }
}

@media (max-width: 640px) {
  .wargini-ui {
    --wui-gutter: 10px;
  }
}