/* css/design-system.css
 * Shared design tokens for Elaaj Bid Dua.
 *
 * This REPLACES the old css/styles.css, which was a leftover from an earlier
 * iteration of the app: it used a totally different color scheme (green
 * #10a37f buttons, plain Segoe UI) than the purple-gradient branding used
 * on every other screen in the app, and its generic `button`, `input`,
 * `select`, `textarea` rules were silently colliding with the inline
 * per-page styles on index.html / otp.html / otp-verify.html (the only
 * three pages that loaded it). This file intentionally does NOT set bare
 * element selectors like `button {}` or `input {}` for that reason - only
 * CSS custom properties and opt-in utility classes, so it can be loaded
 * everywhere without fighting each page's own styles.
 */

:root {
  /* Brand */
  --ds-primary: #667eea;
  --ds-secondary: #764ba2;
  --ds-gradient: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-secondary) 100%);

  /* Semantic */
  --ds-success: #00b894;
  --ds-danger: #ff7675;
  --ds-danger-strong: #ef4444;
  --ds-warning: #f59e0b;

  /* Neutrals */
  --ds-text: #2d3436;
  --ds-text-muted: #636e72;
  --ds-text-faint: #94a3b8;
  --ds-bg: #f4f7f6;
  --ds-border: #e2e8f0;

  /* Shape */
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 20px;
  --ds-shadow-card: 0 4px 15px rgba(0,0,0,0.1);
  --ds-shadow-lift: 0 10px 30px rgba(0,0,0,0.08);

  --ds-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Utility: disabled "coming soon" buttons ----------
   Previously these looked almost identical to real, working buttons
   (just slightly greyed), which made them easy to tap by mistake. */
.ds-soon {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed !important;
  filter: grayscale(40%);
}
.ds-soon::after {
  content: "Soon";
  position: absolute;
  top: 4px;
  right: 6px;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
  pointer-events: none;
}
body.rtl .ds-soon::after { right: auto; left: 6px; }

/* ---------- Utility: empty / error states for data lists ---------- */
.ds-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--ds-text-faint);
  font-size: 14px;
}
.ds-empty-state .ds-empty-icon { font-size: 32px; margin-bottom: 10px; display: block; }
.ds-error-state {
  text-align: center;
  padding: 30px 20px;
  color: var(--ds-danger-strong);
  font-size: 14px;
  background: #fef2f2;
  border-radius: var(--ds-radius-md);
}

/* ---------- Utility: skeleton loading rows ---------- */
.ds-skeleton-row {
  height: 60px;
  border-radius: var(--ds-radius-md);
  margin-bottom: 10px;
  background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 37%, #eef1f5 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.4s ease infinite;
}
@keyframes ds-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- Utility: connection status banner ---------- */
.ds-offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--ds-danger-strong);
  color: white;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 8px;
  z-index: 9999;
  display: none;
  animation: ds-slide-down 0.3s ease;
}
.ds-offline-banner.show { display: block; }
@keyframes ds-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---------- Utility: critical-case indicator that doesn't rely on color alone ---------- */
.ds-critical-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}
.ds-critical-badge::before { content: "\26A0"; } /* warning triangle, not color-only */