/* Vagoonya Mobile — Design Tokens (canonical) */
:root {
  /* Surfaces */
  --page: #ffffff;
  --surface: #fbf7f2;
  --surface-raised: #ffffff;
  --surface-muted: #f5efe7;
  --surface-sunken: #f0e8dd;

  /* Ink */
  --ink: #2d1b0e;
  --ink-strong: #1f1209;
  --ink-dim: #6b5a4d;
  --ink-low: #9c8a7b;
  --ink-soft: #bfb3a4;

  /* Lines */
  --line: #ebe4dc;
  --line-strong: #d6cbbd;
  --line-soft: #f2ece4;

  /* Brand — warm sunset */
  --brand-50: #fff4ef;
  --brand-100: #ffe4d8;
  --brand-300: #ff9e78;
  --brand-500: #f45d34;
  --brand-600: #d94925;
  --brand-700: #b73a1c;
  --on-brand: #fff4ef;

  /* Accent */
  --accent-500: #c4430a;
  --accent-600: #a3380a;

  /* Dark earth */
  --dark-800: #2d1b0e;
  --dark-900: #1f1209;
  --on-dark: #f5efe7;

  /* Status */
  --success: #2bd9a2;
  --success-deep: #1da47a;
  --success-soft: #d2f7ea;
  --warn: #ffc24b;
  --warn-deep: #d69a1f;
  --warn-soft: #fff1cf;
  --danger: #ff4d6d;
  --danger-deep: #d92b4d;
  --danger-soft: #ffe0e6;
  --info: #3b7be8;
  --info-deep: #1e4fb3;
  --info-soft: #dce9ff;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* Shadows — warm sunset */
  --sh-card: 0 8px 24px rgba(45, 27, 14, 0.06);
  --sh-elev: 0 16px 40px rgba(45, 27, 14, 0.10);
  --sh-cta: 0 12px 28px rgba(244, 93, 52, 0.28);

  /* Type */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-arabic: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
}

/* Dark mode — warm coffee/leather */
[data-theme="dark"] {
  --page: #1a120a;
  --surface: #221710;
  --surface-raised: #2c1f17;
  --surface-muted: #261a12;
  --surface-sunken: #1f140c;
  --ink: #f5efe7;
  --ink-strong: #fff4ef;
  --ink-dim: #bfb3a4;
  --ink-low: #9c8a7b;
  --ink-soft: #6b5a4d;
  --line: #3d2d20;
  --line-strong: #503c2c;
  --line-soft: #2e2118;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

.tnum { font-feature-settings: 'tnum' 1, 'cv11' 1; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }

/* Type scale (mobile) */
.t-display { font-size: 32px; line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; }
.t-h1      { font-size: 28px; line-height: 1.1;  letter-spacing: -0.03em; font-weight: 700; }
.t-h2      { font-size: 22px; line-height: 1.2;  letter-spacing: -0.025em; font-weight: 700; }
.t-h3      { font-size: 18px; line-height: 1.3;  letter-spacing: -0.02em; font-weight: 600; }
.t-bodyL   { font-size: 16px; line-height: 1.5;  font-weight: 400; }
.t-body    { font-size: 15px; line-height: 1.5;  font-weight: 400; }
.t-cap     { font-size: 13px; line-height: 1.4;  letter-spacing: 0.01em; font-weight: 500; }
.t-eyebrow { font-size: 11px; line-height: 1.2;  letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; }

/* Button base */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill); border: 0; cursor: pointer;
  font-family: inherit; font-weight: 600;
  transition: transform .12s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--brand-500); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-600); }
.btn-outline { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.btn-ghost   { background: transparent; color: var(--ink); }
.btn-cream   { background: var(--on-brand); color: var(--brand-600); }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-md { height: 44px; padding: 0 20px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn-block { width: 100%; }

/* Input base */
.input {
  width: 100%; height: 52px; padding: 0 16px;
  border-radius: var(--r-md); background: var(--surface-raised);
  border: 1.5px solid var(--line);
  font-family: inherit; font-size: 16px; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
.input::placeholder { color: var(--ink-soft); }

/* Card */
.card {
  background: var(--surface-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--surface-muted); color: var(--ink-dim);
}
.pill-success { background: var(--success-soft); color: var(--success-deep); }
.pill-warn    { background: var(--warn-soft);    color: var(--warn-deep); }
.pill-danger  { background: var(--danger-soft);  color: var(--danger-deep); }
.pill-info    { background: var(--info-soft);    color: var(--info-deep); }
.pill-brand   { background: var(--brand-50);     color: var(--brand-700); }
.pill-dark    { background: var(--dark-800);     color: var(--on-dark); }

/* Hairline */
hr.hair { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Skeleton pulse */
@keyframes vg-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.skel { background: var(--line-soft); border-radius: var(--r-sm); animation: vg-pulse 1.4s ease-in-out infinite; }

/* Scrollbar in artboards (subtle) */
.scroll-y { overflow-y: auto; }
.scroll-y::-webkit-scrollbar { width: 0; height: 0; }

/* RTL */
[dir="rtl"] { font-family: var(--font-arabic); }
[dir="rtl"] .flip { transform: scaleX(-1); }