/* قوائمي | Qawaimi — shared design tokens + chrome
   Load on platform pages only. Do not load on merchant theme CSS. */

:root {
  --qw-ink: #1A1714;
  --qw-ink-soft: #2C2723;
  --qw-clay: #B8452A;
  --qw-clay-hover: #9C3A24;
  --qw-clay-soft: #F3E4DC;
  --qw-limestone: #F5F1EA;
  --qw-sand: #E8E1D5;
  --qw-white: #FFFCF7;
  --qw-slate: #5C564E;
  --qw-slate-soft: #8A8278;

  --qw-primary: var(--qw-ink);
  --qw-primary-hover: #2C2723;
  --qw-secondary: #4A453E;
  --qw-accent: var(--qw-clay);
  --qw-accent-hover: var(--qw-clay-hover);
  --qw-background: var(--qw-limestone);
  --qw-surface: var(--qw-white);
  --qw-card: var(--qw-white);
  --qw-text: var(--qw-ink);
  --qw-text-muted: var(--qw-slate);
  --qw-border: #E4DCD0;
  --qw-success: #2F6D4F;
  --qw-success-soft: #E3F0E8;
  --qw-warning: #C4852A;
  --qw-warning-soft: #F8EEDC;
  --qw-error: #B42A32;
  --qw-error-soft: #F8E2E3;
  --qw-info: #2A5A8C;
  --qw-info-soft: #E3ECF4;

  --qw-radius-sm: 8px;
  --qw-radius-md: 12px;
  --qw-radius-lg: 16px;
  --qw-radius-xl: 24px;
  --qw-radius-full: 999px;
  --qw-shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.05);
  --qw-shadow-md: 0 8px 24px rgba(26, 23, 20, 0.07);
  --qw-shadow-lg: 0 20px 48px rgba(26, 23, 20, 0.10);
  --qw-font: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic", sans-serif;
  --qw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --qw-t-fast: 180ms;
  --qw-t-med: 280ms;

  --qw-mark: url("../brand/logos/symbol-color.svg");
  --qw-mark-dark: url("../brand/logos/symbol-on-dark.svg");
  --qw-mark-mono: url("../brand/logos/symbol-mono-black.svg");
  --qw-mark-white: url("../brand/logos/symbol-mono-white.svg");
}

.qw-mark,
.qw-mark-inv {
  display: inline-block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--qw-mark) center / contain no-repeat;
}
.qw-mark-inv { background-image: var(--qw-mark-dark); }
.qw-mark-sm { width: 28px; height: 28px; }
.qw-mark-lg { width: 56px; height: 56px; }

body.admin-body,
body.lp-body,
body.super-body {
  font-family: var(--qw-font);
}

/* Map legacy admin vars to Qawaimi */
body.admin-body {
  --ad-bg: var(--qw-limestone);
  --ad-surface: var(--qw-white);
  --ad-ink: var(--qw-ink);
  --ad-muted: var(--qw-slate);
  --ad-line: var(--qw-border);
  --ad-accent: var(--qw-clay);
  --ad-accent-2: var(--qw-clay-hover);
  --ad-side: var(--qw-ink);
  --ad-side-text: #A39A90;
  --ad-side-on: var(--qw-limestone);
  --ad-warn: var(--qw-warning);
  --ad-danger: var(--qw-error);
  --ad-ok: var(--qw-success);
  --ad-shadow: var(--qw-shadow-md);
  --bg: var(--qw-limestone);
  --surface: var(--qw-white);
  --surface2: var(--qw-sand);
  --primary: var(--qw-clay);
  --primary-dark: var(--qw-clay-hover);
  --accent: var(--qw-clay);
  --text: var(--qw-ink);
  --text-sub: var(--qw-slate);
  --divider: var(--qw-border);
  --error: var(--qw-error);
  --success: var(--qw-success);
  background: var(--qw-limestone);
  background-image: none;
  color: var(--qw-ink);
}

.qw-empty,
.qw-error,
.qw-loading,
.qw-success-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--qw-text-muted);
  font-size: 14px;
}
.qw-empty b,
.qw-error b,
.qw-success-state b {
  display: block;
  color: var(--qw-text);
  font-size: 16px;
  margin-bottom: 6px;
}
.loading-spinner {
  width: 28px;
  height: 28px;
  margin: 24px auto;
  border: 2px solid var(--qw-sand);
  border-top-color: var(--qw-clay);
  border-radius: 50%;
  animation: qw-spin .7s linear infinite;
}
@keyframes qw-spin { to { transform: rotate(360deg); } }
@keyframes qw-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes qw-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation: none; }
}

body.admin-body a,
body.admin-body button,
body.lp-body a,
body.lp-body button,
body.super-body a,
body.super-body button {
  transition: background var(--qw-t-fast) var(--qw-ease), color var(--qw-t-fast) var(--qw-ease), border-color var(--qw-t-fast) var(--qw-ease), transform var(--qw-t-fast) var(--qw-ease), opacity var(--qw-t-fast) var(--qw-ease);
}

body.super-body {
  --qw-background: #100E0C;
  --qw-surface: #1C1916;
  --qw-card: #1C1916;
  --qw-text: #F5F1EA;
  --qw-text-muted: #A39A90;
  --qw-border: #322C26;
  --qw-accent: #D15A3C;
  --qw-accent-hover: #B8452A;
}

.super-body .login-page { background: #100E0C; }
.super-body .login-card {
  background: #1C1916;
  border: 1px solid #322C26;
  color: #F5F1EA;
}
.super-body .login-logo { background-image: var(--qw-mark-dark); }
.super-body .login-title { color: #F5F1EA; }
.super-body .login-sub { color: #A39A90; }
.super-body .form-row label { color: #C9C2B8; }

.qw-offline {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--qw-warning-soft);
  color: #6B4A12;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
}

@media (prefers-reduced-motion: reduce) {
  body.admin-body a,
  body.admin-body button,
  body.lp-body a,
  body.lp-body button,
  body.super-body a,
  body.super-body button {
    transition: none;
  }
}