/* Worker360 — design tokens from دليل التصميم (oklch) */
:root {
  --surface: oklch(0.975 0.006 265);
  --sidebar: oklch(0.24 0.04 268);
  --primary: oklch(0.52 0.15 265);
  --primary-strong: oklch(0.42 0.16 265);
  --success: oklch(0.5 0.13 155);
  --warning: oklch(0.62 0.15 75);
  --danger: oklch(0.55 0.19 25);
  --accent: oklch(0.55 0.15 300);
  --border: oklch(0.92 0.008 265);
  --ink: oklch(0.28 0.03 265);
  --ink-soft: oklch(0.55 0.02 265);
  --ink-faint: oklch(0.62 0.02 265);
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--surface); }
body {
  font-family: 'Noto Kufi Arabic', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); text-decoration: underline; }
input, select, textarea, button { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: oklch(0.88 0.01 265); border-radius: 8px; }

/* Numbers and dates inline after Arabic text must be LTR (bidi safety). */
.ltr, .num { direction: ltr; unicode-bidi: isolate; }
.num { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes glowSoft { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes tileDrift { from { background-position: 0 0, 0 0; } to { background-position: 96px 96px, -96px 96px; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Focusable field treatment shared across screens */
.field {
  height: 46px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: oklch(0.98 0.004 265); padding: 0 13px; font-size: 13.5px; outline: none;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
  width: 100%;
}
.field:focus {
  border-color: oklch(0.62 0.13 265); background: #fff;
  box-shadow: 0 0 0 3px oklch(0.92 0.045 265);
}

.btn-primary {
  height: 48px; border: none; border-radius: var(--r-md);
  background: linear-gradient(135deg, oklch(0.56 0.15 268), oklch(0.46 0.16 288));
  color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px oklch(0.52 0.15 265 / 0.28);
  transition: transform 0.2s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }