:root {
  --carbon: #0a0a0c;
  --bone: #f5f3ee;
  --royal: #2563eb;
  --bone-95: rgba(245,243,238,0.95);
  --bone-70: rgba(245,243,238,0.70);
  --bone-50: rgba(245,243,238,0.50);
  --bone-30: rgba(245,243,238,0.30);
  --bone-12: rgba(245,243,238,0.12);
  --bone-06: rgba(245,243,238,0.06);
  --bone-03: rgba(245,243,238,0.03);
  --carbon-12: rgba(10,10,12,0.12);
  --carbon-06: rgba(10,10,12,0.06);
  --signal-success-dot: #16a34a;
  --signal-success-fg: #4ade80;
  --signal-success-bg: rgba(22,163,74,0.15);
  --signal-warning-fg: #facc15;
  --signal-warning-bg: rgba(234,179,8,0.15);
  --signal-danger-fg: #f87171;
  --signal-danger-bg: rgba(185,28,28,0.10);
  --signal-danger: #b91c1c;
  --signal-royal-bg: rgba(37,99,235,0.12);
  --signal-royal-ring: rgba(37,99,235,0.15);
  --font: "Tajawal", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --shadow-pop: 0 30px 80px -20px rgba(0,0,0,0.6);
  --ease-tant: cubic-bezier(0.20, 0.70, 0.20, 1);
  --dur-tap: 120ms;
  --dur-hover: 180ms;
  --dur-enter: 280ms;
  --container-max: 1240px;
  --container-pad: 56px;
}
html, body {
  background: var(--carbon);
  color: var(--bone);
  font-family: var(--font);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}