/* Hapisga design tokens — extracted from v4.3 spec */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

:root {
  --hp-brand: #09a5d9;
  --hp-brand-hover: #0ea4d7;
  --hp-brand-dark: #09779b;
  --hp-brand-tint-50: #e8f4fd;
  --hp-brand-tint-15: rgba(9,165,217,0.15);

  --hp-green: #09d95c;
  --hp-red: #ff5039;
  --hp-amber: #f59e0b;
  --hp-brass: #C5A059;
  --hp-brass-soft: rgba(197, 160, 89, 0.08);
  --hp-brass-border: rgba(197, 160, 89, 0.35);

  --hp-fg-1: #111;
  --hp-fg-2: #333;
  --hp-fg-3: #888;
  --hp-fg-4: #b0b0b0;
  --hp-fg-5: #cccccc;
  --hp-fg-inv: #fff;

  --hp-bg-1: #fff;
  --hp-bg-2: #f5f5f5;
  --hp-bg-3: #eeeeee;

  --hp-border: #cccccc;
  --hp-border-soft: #e0e0e0;

  --hp-radius-sm: 6px;
  --hp-radius-md: 10px;
  --hp-radius-lg: 16px;
  --hp-radius-pill: 999px;

  --hp-shadow-modal: 0 20px 60px rgba(0,0,0,0.4);
  --hp-shadow-card: 0 1px 3px rgba(0,0,0,0.2);

  --hp-font: 'Rubik', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html { direction: rtl; }
body {
  font-family: var(--hp-font);
  color: var(--hp-fg-2);
  background: var(--hp-bg-1);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
* { box-sizing: border-box; }
button { font-family: inherit; }
input { font-family: inherit; }

.hp-ltr { direction: ltr; unicode-bidi: isolate; }